:root {
  --bg: #ffffff;
  --text: #1d1c1a;
  --muted: #72695f;
  --line: rgba(54, 42, 28, 0.08);
  --aqua: #9cefed;
  --lime: #b9ef65;
  --peach: #ffd29a;
  --pink: #f8b0df;
  --stone: #d0cec9;
  --gold: #f1d448;
  --orange: #f0632d;
  --violet: #d3bcff;
  --day-cell-height: clamp(32px, 4vh, 40px);
  --month-gap: 40px; /* overridden by JS */
  /* Совпадает с .month-meta — чтобы год встал в одну линию с январём */
  --month-meta-height: var(--day-cell-height);
  --calendar-font-size: 1rem;
}

* {
  box-sizing: border-box;
}

html {
  font-family: "Inter", "Segoe UI", sans-serif;
  background-color: var(--bg);
  color: var(--text);
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  min-height: 100vh;
}

.shell {
  width: min(1480px, calc(100vw - 32px));
  margin: 0 auto;
  padding: var(--month-gap) 0 0;
}

.timeline {
  display: grid;
  grid-template-columns: 56px 1fr;
  padding: 0;
}

.year-sidebar {
  display: flex;
  align-items: flex-start;
  /* Как у .month-meta + align-items: center — центр года = центр «Январь» */
  padding-top: calc((var(--month-meta-height) - 1.2em) / 2);
}

.months {
  display: grid;
  gap: var(--month-gap);
  padding-bottom: var(--month-gap);
  grid-template-rows: repeat(12, var(--day-cell-height));
}

.month-row {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 6px;
  align-items: start;
  height: var(--day-cell-height);
}

.year-label {
  display: block;
  font-size: var(--calendar-font-size);
  line-height: 1.2;
  font-weight: 900;
}

.month-meta {
  display: flex;
  align-items: center;
  height: var(--day-cell-height);
}

.month-name {
  display: block;
  font-size: var(--calendar-font-size);
  line-height: 1.2;
  font-weight: 500;
}

.month-row.is-current-month .month-name {
  font-weight: 900;
}

.month-track {
  position: relative;
  height: var(--day-cell-height);
  overflow: visible;
}

.day-grid {
  display: grid;
  grid-template-columns: repeat(31, minmax(18px, 1fr));
  column-gap: 0;
  align-items: center;
  position: relative;
  z-index: 1;
  overflow: visible;
}

.event-bars {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--day-cell-height);
  display: grid;
  grid-template-columns: repeat(31, minmax(18px, 1fr));
  column-gap: 0;
  pointer-events: none;
  z-index: 0;
}

.event-bar {
  grid-column: var(--start) / calc(var(--end) + 1);
  grid-row: 1;
  transform: translateY(var(--bar-offset, 0px));
  background: color-mix(
    in srgb,
    var(--event-color, transparent) var(--event-opacity, 90%),
    transparent
  );
  border-radius: 0;
}

.event-bar.is-bar-start {
  border-top-left-radius: 999px;
  border-bottom-left-radius: 999px;
}

.event-bar.is-bar-end {
  border-top-right-radius: 999px;
  border-bottom-right-radius: 999px;
}

.labels {
  display: grid;
  grid-template-columns: repeat(31, minmax(18px, 1fr));
  column-gap: 0;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 2;
  margin-top: 4px;
  grid-template-rows: repeat(var(--label-rows, 1), 14px);
  row-gap: 1px;
  overflow: visible;
}

.day-cell {
  display: grid;
  place-items: center;
  min-height: var(--day-cell-height);
  color: var(--day-text-color, #171717);
  font-size: var(--calendar-font-size);
  line-height: 1;
  font-weight: 500;
  border-radius: 0;
}

.day-num {
  display: contents;
}


/* Сегодня: красный круг как раньше — рисуется в ::after (не влияет на ширину колонок сетки) */
.day-cell.is-today {
  position: relative;
  overflow: visible;
  z-index: 1;
}

.day-cell.is-today::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #ea4b2f;
  box-sizing: border-box;
  pointer-events: none;
  z-index: 0;
}

.day-cell.is-today .day-num {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 1.5rem;
  line-height: 1;
  color: #ffffff;
}

.day-cell.is-today.is-weekend .day-num {
  color: #ffffff;
}

.day-cell.is-hidden {
  visibility: hidden;
}

.day-cell.is-weekend {
  color: var(--day-text-color, #e25531);
}

.day-cell.is-weekend[style*="--day-text-color"] {
  color: color-mix(in srgb, var(--day-text-color, #e25531) 50%, transparent);
}

.event-label {
  position: relative;
  z-index: 2;
  grid-column: var(--start) / calc(var(--end) + 1);
  grid-row: calc(var(--lane) + 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 14px;
  color: #111111;
  white-space: nowrap;
  overflow: visible;
  font-size: 1rem;
  line-height: 1;
  font-weight: 500;
  transform: translateX(var(--label-translate, 0px));
}

.event-label span {
  overflow: visible;
  text-overflow: clip;
}

/* ── Mobile: vertical classic calendar (< 1000px) ── */

@media (max-width: 999px) {
  .shell {
    width: calc(100vw - 24px);
    padding-top: 20px;
  }

  /* Override desktop grid */
  .timeline {
    display: block;
    min-height: unset;
  }

  .year-sidebar,
  .months {
    display: none;
  }

  /* Year heading */
  .year-heading-mobile {
    font-size: var(--calendar-font-size);
    font-weight: 900;
    color: var(--muted);
    margin-bottom: 12px;
    margin-top: 8px;
    padding-left: 14px;
  }

  /* Month block */
  .month-mobile {
    margin-bottom: 28px;
  }

  .month-mobile-header {
    margin-bottom: 6px;
    padding-left: 14px;
  }

  .month-name-mobile {
    font-size: var(--calendar-font-size);
    font-weight: 500;
    color: var(--text);
  }

  .month-mobile.is-current-month .month-name-mobile {
    font-weight: 900;
  }

  /* Week rows */
  .week-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
  }

  /* Day cells */
  .day-cell-mobile {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    font-size: var(--calendar-font-size);
    font-weight: 500;
    color: var(--day-text-color, #171717);
    background: color-mix(
      in srgb,
      var(--event-color, transparent) var(--event-opacity, 100%),
      transparent
    );
    border-radius: 0;
    position: relative;
  }

  .day-cell-mobile.is-empty {
    visibility: hidden;
  }

  .day-cell-mobile.is-weekend {
    color: var(--day-text-color, #e25531);
  }

  /* Pill caps — round at true event boundary OR at week-wrap boundary */
  .day-cell-mobile.is-pill-start {
    border-top-left-radius: 999px;
    border-bottom-left-radius: 999px;
  }

  .day-cell-mobile.is-pill-end {
    border-top-right-radius: 999px;
    border-bottom-right-radius: 999px;
  }

  /* Today indicator */
  .day-cell-mobile.is-today {
    z-index: 1;
    overflow: visible;
  }

  .day-cell-mobile.is-today::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 2.2em;
    height: 2.2em;
    border-radius: 50%;
    background: #ea4b2f;
    pointer-events: none;
    z-index: 0;
  }

  .day-cell-mobile.is-today .day-num {
    position: relative;
    z-index: 1;
    font-weight: 900;
    font-size: 1.1em;
    color: #ffffff;
  }

  .day-cell-mobile.is-today.is-weekend .day-num {
    color: #ffffff;
  }

  /* Event labels below each week row */
  .week-labels {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 3px 0 6px;
    min-height: calc(var(--calendar-font-size) * 1.4 + 9px);
  }

  .event-label-mobile {
    position: relative;
    display: flex;
    align-items: center;
    padding-left: 14px;
    font-size: var(--calendar-font-size);
    font-weight: 500;
    color: var(--text);
    line-height: 1.4;
  }

  .event-label-mobile::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: color-mix(
      in srgb,
      var(--event-color, var(--muted)) var(--event-opacity, 100%),
      transparent
    );
  }
}

@media (max-width: 480px) {
  .shell {
    width: calc(100vw - 16px);
  }
}