body.page-calendar .content-inner {
  overflow: visible;
  max-width: 100%;
}

.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

.calendar-header-left {
  /* Якорь для .calendar-month-picker: она position:absolute и без этого
     считает координаты от окна, а не от шапки. */
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
}

.calendar-title-btn-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-width: 180px;
}

body.fonts-loaded .calendar-title-btn-wrapper {
  min-width: unset;
}

.calendar-title {
  font-family: 'Unbounded', sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
  color: var(--color-ink);
  margin: 0;
  visibility: hidden;
}

body.fonts-loaded .calendar-title {
  visibility: visible;
}

.skeleton-title {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  visibility: hidden;
  width: 180px;
  height: 14px;
  background: var(--color-skeleton);
  border-radius: 100px;
  pointer-events: none;
}

body:not(.fonts-loaded) .skeleton-title {
  visibility: visible;
}

body:not(.fonts-loaded) .calendar-title {
  visibility: hidden;
}

.calendar-title-btn {
  width: 44px;
  height: 44px;
  border-radius: 16px;
  background: transparent;
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition-colors);
}

.calendar-title-btn:hover {
  background: var(--color-hover);
  border-color: transparent;
}

.calendar-title-btn:hover .material-symbols-rounded {
  color: var(--color-brand);
}

.calendar-title-btn .material-symbols-rounded {
  font-size: 24px;
  color: var(--color-ink);
}

.calendar-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.calendar-month-picker {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 360px;
  background: #fff;
  border-radius: 24px;
  /* Снизу 12: месяцы — плашки с полем 8, текст остаётся в 24 от края. */
  padding: var(--space-6) var(--space-6) var(--space-3);
  box-shadow: var(--shadow-panel);
  z-index: 100;
}

.calendar-month-picker.active {
  display: block;
}

.calendar-month-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.calendar-month-picker-btn {
  width: 44px;
  height: 44px;
  border-radius: 16px;
  background: transparent;
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition-colors);
}

.calendar-month-picker-btn:hover {
  background: var(--color-hover);
  border-color: transparent;
}

.calendar-month-picker-btn:hover .material-symbols-rounded {
  color: var(--color-brand);
}

.calendar-month-picker-btn .material-symbols-rounded {
  font-size: 24px;
  color: var(--color-ink);
}

.calendar-month-picker-year {
  font-family: 'Montserrat', sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
  color: var(--color-ink);
}

.calendar-month-picker-divider {
  height: 1px;
  background: var(--color-border);
  margin-top: 20px;
}

/* Месяцы — плашки, как пункты Dropdown: поля 8/12, радиус 12, наведение и
   фокус — фон --color-hover и синий текст. Сетка выходит на 12 за поле
   панели — плашки стоят в 12 от её краёв, текст — на прежнем месте; шаг
   строк прежний, 44 (36 + 8). */
.calendar-month-picker-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2) 0;
  margin: var(--space-3) calc(-1 * var(--space-3)) 0;
}

.calendar-month-picker-item {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  color: var(--color-ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  text-align: left;
  transition: color var(--duration-base) var(--ease-out), background-color var(--duration-base) var(--ease-out);
}

.calendar-month-picker-item:hover,
.calendar-month-picker-item:focus-visible {
  background: var(--color-hover);
  outline: none;
}

.calendar-month-picker-item:not(.active):hover,
.calendar-month-picker-item:focus-visible {
  color: var(--color-brand);
}

.calendar-month-picker-item.active {
  cursor: default;
  pointer-events: none;
}

.calendar-month-picker-item.active span:first-child {
  opacity: 0.24;
}

.calendar-month-picker-item.current .calendar-month-picker-dot {
  background: var(--color-brand);
}

.calendar-month-picker-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: transparent;
}

.calendar-today-btn {
  padding: 12px 16px;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  color: var(--color-ink);
  cursor: pointer;
  transition: var(--transition-colors), opacity var(--duration-base) var(--ease-out);
}

.calendar-today-btn:hover:not(.disabled) {
  background: var(--color-hover);
  color: var(--color-brand);
  border-color: transparent;
}

.calendar-today-btn.disabled {
  border-color: var(--color-border-soft);
  cursor: default;
}

.calendar-today-btn.disabled span {
  color: var(--color-ink);
  opacity: 0.24;
}

.calendar-today-btn.disabled:hover {
  background: transparent;
  border-color: var(--color-border-soft);
}

.calendar-nav-btn {
  width: 44px;
  height: 44px;
  border-radius: 16px;
  background: transparent;
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition-colors);
}

.calendar-nav-btn:hover {
  background: var(--color-hover);
  border-color: transparent;
}

.calendar-nav-btn:hover .material-symbols-rounded {
  color: var(--color-brand);
}

.calendar-nav-btn .material-symbols-rounded {
  font-size: 24px;
  color: var(--color-ink);
}

#calendar-filters-container {
  margin-top: 24px;
}

/* Два ряда (ui.TypePick rows, как в ленте — events.css): категории, ниже остальное; между рядами 16. */
@media (min-width: 768px) {
  #calendar-filters-container:has(> .type-pick--rows) { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-2); }
}

.calendar-divider {
  height: 1px;
  background: var(--color-border);
  margin-top: 24px;
}

.calendar-weekdays {
  display: flex;
  gap: 8px;
  margin-top: 24px;
  width: 100%;
}

.calendar-weekday {
  flex: 1;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  color: var(--color-ink-secondary);
  text-transform: uppercase;
}

.calendar-weekday.weekend {
  color: var(--color-danger);
}

.calendar-grid {
  margin-top: 8px;
  padding-bottom: 24px;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}

.calendar-day {
  min-height: 245px;
  min-width: 0;
  border-radius: 24px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--duration-base) var(--ease-out);
}

.calendar-day.has-events {
  cursor: pointer;
}

.calendar-day.has-events:hover {
  box-shadow: 0 0 32px 0 var(--color-overlay-8);
}

.calendar-day.has-events:hover:has(.calendar-day-ad:hover),
.calendar-day.has-events:hover:has(.calendar-day-ad-filled:hover) {
  box-shadow: none;
}

.calendar-day.has-events:hover .calendar-day-num,
.calendar-day.has-events.past:hover .calendar-day-num {
  color: var(--color-brand);
}

.calendar-day.has-events:hover:has(.calendar-day-ad:hover) .calendar-day-num,
.calendar-day.has-events:hover:has(.calendar-day-ad-filled:hover) .calendar-day-num {
  color: var(--color-ink);
}

.calendar-day.has-events.past:hover:has(.calendar-day-ad:hover) .calendar-day-num,
.calendar-day.has-events.past:hover:has(.calendar-day-ad-filled:hover) .calendar-day-num {
  color: var(--color-muted);
}

.calendar-day.past {
  background: transparent;
  border: 1px solid var(--color-border-soft);
}

.calendar-day.today {
  background: #fff;
  border: 2px solid var(--color-brand);
}

.calendar-day.future {
  background: #fff;
  border: none;
}

.calendar-day.past {
  background: transparent;
  border: 1px solid var(--color-border-soft);
}

.calendar-day.future-month {
  background: transparent;
  border: 1px solid var(--color-border);
}

/* Прозрачный день — на фоне страницы: круг буквы в аватарке (AvatarLetter) того же цвета,
   а не белый диск в цветном кольце. */
.calendar-day.past,
.calendar-day.future-month { --avatar-bg: var(--color-bg); }

.calendar-day-num {
  font-family: 'Montserrat', sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 26px;
  color: var(--color-ink);
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  transition: color var(--duration-base) var(--ease-out);
}

.calendar-day.past .calendar-day-num {
  color: var(--color-muted);
}

.calendar-day-num-wrap {
  max-width: 100%;
  display: flex;
  align-items: center;
  gap: 4px;
}

.calendar-today-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-brand);
  display: inline-block;
  flex-shrink: 0;
}

/* Стопка аватарок (CalendarAvatarStack) — одна у календаря и подборок (CollectionCard):
   место аватарки — круг на --stack-ring шире неё, следующее место заходит на 16 (сами
   аватарки — на 10): шаг 38 у 48 (Figma 661:74), 22 у 32 (образец пользователя 15.10.2026).
   Зазор --stack-ring = --avatar-cut (3) — прозрачный вырез-«полумесяц» маской в
   предыдущей аватарке: в нём фон дня или карточки (белый, серый, цветной), своих колец и
   подложек нет. Обводка цвета категории остаётся. --stack-size — диаметр аватарки с обводкой. */
.calendar-day-events {
  --stack-size: 32px;
  --stack-ring: var(--avatar-cut);
  --stack-overlap: var(--space-4);
  margin-top: 12px;
  display: flex;
  align-items: center;
}

.event-avatar-wrapper {
  position: relative;
  box-sizing: border-box;
  width: calc(var(--stack-size) + 2 * var(--stack-ring));
  height: calc(var(--stack-size) + 2 * var(--stack-ring));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Вырез — у каждой аватарки, на которую заходит следующее место: следующая аватарка или
   невидимый круг «+N» (у последней перед «+N» вырез тоже есть; нет только у последней в
   стопке без счётчика). Центр выреза — центр следующего места: 1,5 диаметра + 2 зазора −
   наложение от левого края. */
.event-avatar-wrapper:not(:last-child) .event-avatar {
  --cut: radial-gradient(circle at calc(1.5 * var(--stack-size) + 2 * var(--stack-ring) - var(--stack-overlap)) 50%,
    transparent calc(var(--stack-size) / 2 + var(--stack-ring)),
    #000 calc(var(--stack-size) / 2 + var(--stack-ring) + 0.5px));
  -webkit-mask: var(--cut);
  mask: var(--cut);
}

/* Следующая аватарка и круг «+N» заходят на предыдущую на --stack-overlap. */
.event-avatar-wrapper:not(:first-child),
.event-counter {
  margin-left: calc(-1 * var(--stack-overlap));
}

.event-avatar-wrapper .event-avatar {
  position: relative;
  overflow: hidden;
  width: var(--stack-size);
  height: var(--stack-size);
  border-radius: 50%;
  border: 3px solid;
  background: var(--color-photo-bg);
}

.event-avatar-wrapper[data-type="tech"] .event-avatar { border-color: var(--color-type-tech); }
.event-avatar-wrapper[data-type="music"] .event-avatar { border-color: var(--color-type-music); }
.event-avatar-wrapper[data-type="art"] .event-avatar { border-color: var(--color-type-art); }
.event-avatar-wrapper[data-type="sport"] .event-avatar { border-color: var(--color-brand); }
.event-avatar-wrapper[data-type="cinema"] .event-avatar { border-color: var(--color-type-cinema); }
.event-avatar-wrapper[data-type="games"] .event-avatar { border-color: var(--color-type-games); }
.event-avatar-wrapper[data-type="theatre"] .event-avatar { border-color: var(--color-type-theatre); }
.event-avatar-wrapper[data-type="knowledge"] .event-avatar { border-color: var(--color-type-knowledge); }
.event-avatar-wrapper[data-type="city"] .event-avatar { border-color: var(--color-type-city); }
.event-avatar-wrapper[data-type="other"] .event-avatar { border-color: var(--color-type-other); }

/* «+N» — последний в стопке: невидимый круг (без заливки и обводки) того же места, что
   аватарка, на том же шаге; текст по центру круга. Круг виден только прозрачным вырезом
   3px в последней аватарке (правило выреза выше). Образец пользователя 15.10.2026. */
.event-counter {
  position: relative;
  box-sizing: border-box;
  width: calc(var(--stack-size) + 2 * var(--stack-ring));
  height: calc(var(--stack-size) + 2 * var(--stack-ring));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  white-space: nowrap;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  color: var(--color-ink);
}

/* Крупная стопка вне ячейки дня (карточка подборки, CollectionCard; макет Figma 661:74):
   аватарка 48; зазор 3, наложение 16 и круг «+N» — из общих правил выше. */
.calendar-day-events--large { --stack-size: var(--space-12); margin-top: 0; }

/* Загрузка — не нажимается: без руки и наведения (docs/design-system.md, «Курсор и наведение»). */
.calendar-day-skeleton {
  min-height: 245px;
  border-radius: 24px;
  background: var(--color-skeleton);
}

/* Ошибка в сетке календаря: занимает всю строку. Оформление — общее,
   в components.css (состояния пусто / ошибка / не найдено). */
.error-state {
  grid-column: 1 / 8;
}

.calendar-day-ad-divider {
  height: 1px;
  background: var(--color-border);
  width: 100%;
  margin-top: 12px;
}

.calendar-day-top {
  padding: 16px 16px 12px 16px;
  min-width: 0;
}

.calendar-day-ad-filled {
  border-radius: 24px;
  padding: 12px 16px 16px 16px;
  flex: 1;
  min-width: 0;
}

.calendar-day-ad-filled--tech { background: var(--color-type-tech); color: var(--color-type-tech); }
.calendar-day-ad-filled--music { background: var(--color-type-music); color: var(--color-type-music); }
.calendar-day-ad-filled--art { background: var(--color-type-art); color: var(--color-type-art); }
.calendar-day-ad-filled--sport { background: var(--color-brand); color: var(--color-brand); }
.calendar-day-ad-filled--cinema { background: var(--color-type-cinema); color: var(--color-type-cinema); }
.calendar-day-ad-filled--games { background: var(--color-type-games); color: var(--color-type-games); }
.calendar-day-ad-filled--theatre { background: var(--color-type-theatre); color: var(--color-type-theatre); }
.calendar-day-ad-filled--knowledge { background: var(--color-type-knowledge); color: var(--color-type-knowledge); }
.calendar-day-ad-filled--city { background: var(--color-type-city); color: var(--color-type-city); }
.calendar-day-ad-filled--other { background: var(--color-type-other); color: var(--color-type-other); }

.calendar-day-ad {
  padding-top: 12px;
  cursor: pointer;
}

.calendar-day-ad:hover .calendar-day-ad-title {
  color: var(--color-brand);
}

.calendar-day-ad-filled {
  border-radius: 24px;
  padding: 12px 16px 16px 16px;
  flex: 1;
  cursor: pointer;
}

.calendar-day-ad-title--white {
  color: #fff !important;
}

.calendar-day-ad-tag--white {
  color: var(--color-on-dark-80) !important;
}

.calendar-day-ad-tag-separator--white {
  background: #fff !important;
}

.calendar-day-ad-filled .calendar-day-ad-icon {
  background: #fff !important;
}

.calendar-day-ad-filled .calendar-day-ad-icon .material-symbols-rounded {
  color: inherit !important;
}

.calendar-day-ad-filled:hover .calendar-day-ad-title--white {
  color: rgba(255, 255, 255, 0.6) !important;
}

.calendar-day-ad-avatar-wrapper {
  position: relative;
  width: 64px;
  height: 64px;
  flex-shrink: 0;
}

.calendar-day-ad-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 3px solid;
  background: var(--color-photo-bg);
}

.calendar-day-ad-avatar--white {
  border-color: #fff !important;
}

.calendar-day-ad-avatar-wrapper[data-type="tech"] .calendar-day-ad-avatar { border-color: var(--color-type-tech); }
.calendar-day-ad-avatar-wrapper[data-type="music"] .calendar-day-ad-avatar { border-color: var(--color-type-music); }
.calendar-day-ad-avatar-wrapper[data-type="art"] .calendar-day-ad-avatar { border-color: var(--color-type-art); }
.calendar-day-ad-avatar-wrapper[data-type="sport"] .calendar-day-ad-avatar { border-color: var(--color-brand); }
.calendar-day-ad-avatar-wrapper[data-type="cinema"] .calendar-day-ad-avatar { border-color: var(--color-type-cinema); }
.calendar-day-ad-avatar-wrapper[data-type="games"] .calendar-day-ad-avatar { border-color: var(--color-type-games); }
.calendar-day-ad-avatar-wrapper[data-type="theatre"] .calendar-day-ad-avatar { border-color: var(--color-type-theatre); }
.calendar-day-ad-avatar-wrapper[data-type="knowledge"] .calendar-day-ad-avatar { border-color: var(--color-type-knowledge); }
.calendar-day-ad-avatar-wrapper[data-type="city"] .calendar-day-ad-avatar { border-color: var(--color-type-city); }
.calendar-day-ad-avatar-wrapper[data-type="other"] .calendar-day-ad-avatar { border-color: var(--color-type-other); }

.calendar-day-ad-icon {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.calendar-day-ad-icon .material-symbols-rounded {
  font-size: 18px;
  color: #fff;
}

.calendar-day-ad-avatar-wrapper[data-type="tech"] .calendar-day-ad-icon { background: var(--color-type-tech); }
.calendar-day-ad-avatar-wrapper[data-type="music"] .calendar-day-ad-icon { background: var(--color-type-music); }
.calendar-day-ad-avatar-wrapper[data-type="art"] .calendar-day-ad-icon { background: var(--color-type-art); }
.calendar-day-ad-avatar-wrapper[data-type="sport"] .calendar-day-ad-icon { background: var(--color-brand); }
.calendar-day-ad-avatar-wrapper[data-type="cinema"] .calendar-day-ad-icon { background: var(--color-type-cinema); }
.calendar-day-ad-avatar-wrapper[data-type="games"] .calendar-day-ad-icon { background: var(--color-type-games); }
.calendar-day-ad-avatar-wrapper[data-type="theatre"] .calendar-day-ad-icon { background: var(--color-type-theatre); }
.calendar-day-ad-avatar-wrapper[data-type="knowledge"] .calendar-day-ad-icon { background: var(--color-type-knowledge); }
.calendar-day-ad-avatar-wrapper[data-type="city"] .calendar-day-ad-icon { background: var(--color-type-city); }
.calendar-day-ad-avatar-wrapper[data-type="other"] .calendar-day-ad-icon { background: var(--color-type-other); }

.calendar-day-ad-title {
  font-family: 'Unbounded', sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  color: var(--color-ink);
  margin-top: 12px;
  transition: color var(--duration-base) var(--ease-out);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.calendar-day-ad-tags {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  margin-top: 4px;
  overflow: hidden;
  white-space: nowrap;
}

.calendar-day-ad-tag {
  font-family: 'Onest', sans-serif;
  font-size: 12px;
  line-height: 16px;
  color: var(--color-ink-secondary);
  flex-shrink: 0;
}

.calendar-day-ad-tag-separator {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-ink);
  flex-shrink: 0;
}

/* ---------- Мобильная версия (≤ 767px) ----------
   По макету календаря 375px.
   Шапка — два ряда: «Месяц Год» и кнопка выбора месяца; под ними
   «‹ · Сегодня · ›», где «Сегодня» занимает всё между стрелками.
   Сетка — семь колонок по ~44px через 4px, ячейка 135px. Вместо стопки
   аватарок в ячейке цветные чёрточки по типам событий (24×3, через 2px),
   под ними «+N» без кружка. Выделенное событие — аватарка 32px у нижнего
   края; у залитой карточки — на цветном квадрате. Выбор месяца открывается
   шторкой снизу. Разметка та же, что на десктопе: всё делает CSS. */
@media (max-width: 767px) {
  /* Шапка */
  .calendar-header {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    grid-template-areas:
      "title title pick"
      "prev  today next";
    column-gap: var(--space-2);
    row-gap: var(--space-4);
    align-items: center;
  }

  .calendar-header-left,
  .calendar-header-right {
    display: contents;
  }

  .calendar-title-btn-wrapper {
    grid-area: title;
    min-width: 0;
  }

  .calendar-title-btn {
    grid-area: pick;
  }

  /* 44px, как стрелки рядом: рамка входит в высоту. */
  .calendar-today-btn {
    grid-area: today;
    width: 100%;
    height: 44px;
    padding-top: 0;
    padding-bottom: 0;
  }

  .calendar-header-right .calendar-nav-btn:nth-child(2) {
    grid-area: prev;
  }

  .calendar-header-right .calendar-nav-btn:nth-child(3) {
    grid-area: next;
  }

  /* Выбор месяца — шторка снизу поверх затемнения */
  .calendar-month-picker {
    position: fixed;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    /* Снизу 16: последний ряд месяцев — плашки с полем 8, текст в 24 от края. */
    padding: var(--space-6) var(--space-mobile) calc(var(--space-4) + env(safe-area-inset-bottom));
    box-shadow: 0 0 0 100vmax var(--color-overlay-24);
    z-index: 1000;
  }

  /* Прозрачная подложка на весь экран: затемнение — это тень, сквозь неё
     страница ловила бы наведение и клики. Клик по подложке приходит с
     target = шторка — calendar.html закрывает её по координатам. */
  .calendar-month-picker::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
  }

  .calendar-month-picker::before {
    content: '';
    position: absolute;
    top: var(--space-2);
    left: 50%;
    width: 40px;
    height: 4px;
    margin-left: -20px;
    border-radius: var(--radius-pill);
    background: var(--color-border);
  }

  #calendar-filters-container {
    margin-top: var(--space-mobile);
  }

  .calendar-divider {
    margin-top: var(--space-mobile);
  }

  /* Дни недели: короткие названия из data-short */
  .calendar-weekdays {
    gap: 4px;
    margin-top: var(--space-mobile);
  }

  .calendar-weekday {
    font-size: 0;
  }

  .calendar-weekday::after {
    content: attr(data-short);
    font-size: var(--text-xs);
  }

  /* Сетка и ячейка */
  .calendar-grid {
    gap: 4px;
    margin-top: 4px;
    padding-bottom: var(--space-mobile);
  }

  .calendar-day,
  .calendar-day-skeleton {
    min-height: 135px;
    border-radius: var(--radius-sm);
  }

  .calendar-day {
    padding: var(--space-4) 0 6px;
    align-items: center;
  }

  /* Ячейка без боковых полей — свои, чтобы многоточие не упиралось в рамку */
  .calendar-day-num-wrap {
    padding: 0 var(--space-1);
  }

  .calendar-day-num {
    font-size: var(--text-xs);
    line-height: 16px;
  }

  /* Месяц у первого числа — три буквы из data-short, как дни недели */
  /* line-height: 0 у span с нулевым кеглем — иначе его строка в 16px
     центрируется по базовой линии, ячейка вырастает до 20px и чёрточки
     съезжают вниз. Высоту строки задаёт ::after. */
  .calendar-day-month {
    font-size: 0;
    line-height: 0;
  }

  .calendar-day-month::after {
    content: ' ' attr(data-short);
    font-size: var(--text-xs);
    line-height: 16px;
  }

  .calendar-today-dot {
    width: 4px;
    height: 4px;
  }

  /* Аватарки событий → цветные чёрточки по типу */
  .calendar-day-events {
    margin-top: var(--space-3);
    flex-direction: column;
    gap: 2px;
  }

  /* Крупная стопка вне ячейки дня остаётся рядом, а не чёрточками. */
  .calendar-day-events--large { margin-top: 0; flex-direction: row; gap: 0; }

  .calendar-day .event-avatar-wrapper,
  .calendar-day .event-avatar-wrapper:not(:first-child) {
    width: 24px;
    height: 3px;
    margin-left: 0;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--color-type-art);
  }

  .calendar-day .event-avatar-wrapper[data-type="tech"] { background: var(--color-type-tech); }
  .calendar-day .event-avatar-wrapper[data-type="music"] { background: var(--color-type-music); }
  .calendar-day .event-avatar-wrapper[data-type="sport"] { background: var(--color-type-sport); }
  .calendar-day .event-avatar-wrapper[data-type="cinema"] { background: var(--color-type-cinema); }
  .calendar-day .event-avatar-wrapper[data-type="games"] { background: var(--color-type-games); }
  .calendar-day .event-avatar-wrapper[data-type="theatre"] { background: var(--color-type-theatre); }
  .calendar-day .event-avatar-wrapper[data-type="knowledge"] { background: var(--color-type-knowledge); }
  .calendar-day .event-avatar-wrapper[data-type="city"] { background: var(--color-type-city); }
  .calendar-day .event-avatar-wrapper[data-type="other"] { background: var(--color-type-other); }

  .calendar-day .event-avatar-wrapper .event-avatar {
    display: none;
  }

  /* «+N» — просто текст под чёрточками */
  .calendar-day .event-counter {
    min-width: 0;
    width: auto;
    height: auto;
    padding: 0;
    background: none;
    margin: var(--space-3) 0 0;
    font-size: var(--text-xs);
    line-height: 16px;
  }

  /* Выделенное событие — только аватарка 32px внизу ячейки */
  .calendar-day-ad-divider,
  .calendar-day-ad-title,
  .calendar-day-ad-tags,
  .calendar-day-ad-icon {
    display: none;
  }

  .calendar-day-ad {
    margin-top: auto;
    padding-top: var(--space-3);
  }

  .calendar-day-ad-avatar-wrapper,
  .calendar-day-ad-avatar {
    width: 32px;
    height: 32px;
  }

  /* Залитая карточка: цветной квадрат во всю ширину ячейки, аватарка в нём */
  .calendar-day-top {
    padding: var(--space-4) 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .calendar-day-ad-filled {
    flex: 0 0 auto;
    align-self: stretch;
    margin-top: auto;
    padding: 6px;
    border-radius: var(--radius-sm);
    display: flex;
    justify-content: center;
  }
}