.abcms {
  box-sizing: border-box;
  width: 100%;
  max-width: 390px;
  margin: 0;
  padding: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  line-height: 1.35;
  --abcms-soft: color-mix(in srgb, currentColor 5%, transparent);
  --abcms-border: color-mix(in srgb, currentColor 22%, transparent);
  --abcms-muted: color-mix(in srgb, currentColor 62%, transparent);
  --abcms-selected: #fff;
  --abcms-today: #fff;
  --abcms-lunar-eclipse: #e64d63;
  --abcms-solar-eclipse: #f3a64a;
  --abcms-supermoon: #ead59d;
  --abcms-micromoon: #b6cadf;
  --abcms-blue-moon: #6e8fe8;
}

.abcms *,
.abcms *::before,
.abcms *::after {
  box-sizing: border-box;
}

.abcms button {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

.abcms__loading,
.abcms__error {
  padding: .5rem 0;
  font-size: .9em;
  opacity: .65;
}

.abcms__summary {
  text-align: center;
  padding: 0 0 .88rem;
}

.abcms__selected-date {
  margin: 0 0 .18rem;
  font-size: .98em;
  font-weight: 400;
  opacity: .78;
}

.abcms__phase-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
}

.abcms__phase-title {
  display: block;
  margin: 0;
  font-size: 1.34em;
  line-height: 1.15;
  font-weight: 700;
  color: inherit;
}

/* Место под название события всегда зарезервировано, поэтому календарь не прыгает. */
.abcms__event-slot {
  height: 2.45rem;
  margin-top: .28rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.abcms__badges {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  gap: .22rem;
  max-height: 2.45rem;
  overflow: hidden;
}

.abcms__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.38rem;
  max-width: 100%;
  padding: .12rem .46rem;
  border: 0;
  border-radius: 999px;
  font-size: .73em;
  line-height: 1.15;
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #fff;
}

.abcms__badge--lunar-eclipse { background: var(--abcms-lunar-eclipse); }
.abcms__badge--solar-eclipse { background: var(--abcms-solar-eclipse); color: #2b2418; }
.abcms__badge--supermoon { background: var(--abcms-supermoon); color: #2a261d; }
.abcms__badge--micromoon { background: var(--abcms-micromoon); color: #1f2a33; }
.abcms__badge--blue { background: var(--abcms-blue-moon); }

.abcms__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  justify-items: center;
  align-items: start;
  gap: 0;
  /* 96.86% = ширина от внешнего края первого лунного кружка до внешнего края седьмого. */
  width: 96.86%;
  margin: .36rem auto 0;
  text-align: center;
}

.abcms__stat {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.abcms__stat span,
.abcms__stat strong {
  display: block;
}

.abcms__stat span {
  margin-bottom: .08rem;
  font-size: .77em;
  line-height: 1.2;
  opacity: .56;
  white-space: nowrap;
}

.abcms__stat strong {
  font-size: 1em;
  line-height: 1.2;
  font-weight: 650;
  white-space: nowrap;
}

.abcms__calendar {
  width: 100%;
}

.abcms__month-nav {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) 2rem;
  align-items: center;
  gap: .25rem;
  margin-bottom: .72rem;
}

.abcms__month-arrow,
.abcms__day {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  box-shadow: none;
  text-decoration: none;
  outline: none;
}

.abcms__month-current {
  min-width: 0;
  text-align: center;
  font-size: .96em;
  line-height: 1.2;
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.abcms__month-arrow {
  width: 2rem;
  height: 2rem;
  padding: 0;
  border-radius: 50%;
  background: transparent;
  font-size: 1.5em;
  line-height: 1;
  opacity: .58;
  cursor: pointer;
}

.abcms__month-arrow:hover,
.abcms__month-arrow:focus-visible {
  opacity: 1;
  background: var(--abcms-soft, transparent);
}

.abcms__weekdays,
.abcms__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.abcms__weekdays {
  margin-bottom: .25rem;
}

.abcms__weekdays span {
  text-align: center;
  font-size: .72em;
  font-weight: 550;
  opacity: .52;
}

.abcms__grid {
  row-gap: .22rem;
}

.abcms__day {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  min-width: 0;
  padding: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.abcms__day--empty {
  pointer-events: none;
}

.abcms__day:hover:not(.abcms__day--empty) {
  background: var(--abcms-soft, transparent);
}

.abcms__day:focus-visible::before,
.abcms__day.is-selected::before {
  content: '';
  position: absolute;
  inset: 5%;
  border: 1.5px solid var(--abcms-selected);
  border-radius: 50%;
  pointer-events: none;
}

.abcms__day.is-selected::before {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--abcms-selected) 28%, transparent);
}

.abcms__moon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 78%;
  height: 78%;
  color: inherit;
}

.abcms__moon-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.abcms__day-number {
  position: relative;
  z-index: 1;
  font-size: .83em;
  line-height: 1;
  font-weight: 600;
  color: inherit;
}

/* Сегодня — маленькая белая точка строго под цифрой. */
.abcms__today-dot {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 5%;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--abcms-today);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .08);
  pointer-events: none;
}

.abcms__markers {
  position: absolute;
  z-index: 4;
  top: 6%;
  right: 6%;
  display: flex;
  align-items: center;
  gap: 2px;
  pointer-events: none;
}

.abcms__marker {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .08);
}

/* Цвета событий по легенде. */
.abcms__marker--lunar-eclipse { background: var(--abcms-lunar-eclipse); }
.abcms__marker--solar-eclipse { background: var(--abcms-solar-eclipse); }
.abcms__marker--supermoon { background: var(--abcms-supermoon); }
.abcms__marker--micromoon { background: var(--abcms-micromoon); }
.abcms__marker--blue { background: var(--abcms-blue-moon); }

@supports not (color: color-mix(in srgb, black 50%, transparent)) {
  .abcms__day.is-selected::before {
    box-shadow: none;
  }
}

@media (max-width: 340px) {
  .abcms__stat span {
    font-size: .72em;
  }

  .abcms__stat strong {
    font-size: .95em;
  }

  .abcms__month-nav {
    grid-template-columns: 1.75rem minmax(0, 1fr) 1.75rem;
  }

  .abcms__month-arrow {
    width: 1.75rem;
    height: 1.75rem;
  }
}