.month-range {
  font-size: var(--text-sm);
  color: var(--ink-muted);
}

.month-calendar {
  display: grid;
  gap: var(--space-1);
}

.month-weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--space-1);
}

.month-weekday {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--ink-muted);
  text-align: center;
}

.month-weekday-long {
  display: none;
}

.month-grid {
  display: grid;
  gap: var(--space-1);
}

.month-week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--space-1);
}

.month-day {
  /* The head bar (Components::DayColumnHead) bleeds by the column padding;
     a month cell has none, so the bar sits flush and pads itself below. */
  --day-column-pad-y: 0px;
  --day-column-pad-x: 0px;
  --day-column-radius: var(--radius-sm);
  /* A narrow cell is its number and dots only; the container query below
     shows the weather again once the cell is wide enough. */
  --day-column-weather-display: none;
  container-type: inline-size;
  /* The cell's frame; its cycles menu spans the cycles band inside it
     (.day-band-cycles), the nearer positioned box. */
  position: relative;
  min-width: 0;
  min-height: var(--tap);
  background: var(--surface);
  border: var(--line-width) solid var(--line);
  border-radius: var(--radius-sm);
}

/* A day the score's focused row is absent from steps back
   (month_score_controller.js). */
.month-day[data-score-match="false"] {
  opacity: 0.35;
  transition: opacity 160ms ease-out;
}

.month-day-today {
  box-shadow: 0 0 0 2px var(--accent);
}

.month-day-selected {
  background: var(--surface-sunken);
}

/* A narrow cell is just its head: the number over the workout dots,
   centered (the weather hides through --day-column-weather-display).
   Compound so it wins over .day-column-head (weekly_planner.css loads
   after this file). */
.month-day-link.day-column-head {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 2px;
  min-height: var(--tap);
  padding: 0 var(--space-1);
  color: inherit;
  text-decoration: none;
}

.month-dots {
  display: flex;
  gap: 2px;
}

.month-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

.month-dot-planned {
  background: transparent;
  border: var(--line-width) solid var(--accent);
}

.month-dot-warning {
  background: var(--caution);
}

.month-day-body {
  display: none;
}

/* The holiday row bleeds to the cell's edges like the day's bands
   (Components::DayStrata, day.css) and swallows the gap below it, so its
   head tint meets the cycles band. */
.month-day-holidays {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: 0 calc(-1 * var(--space-2)) calc(-1 * var(--space-1));
  padding: 0 var(--space-2) var(--space-1);
  /* A holiday belongs to the day itself, so it extends the head's tint. */
  background: var(--stratum-head);
}

.month-detail {
  margin: var(--space-2) 0;
}

.month-divider {
  margin: var(--space-3) 0 var(--space-1);
  border-bottom: var(--line-width) solid var(--line);
}

.month-divider-label {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--ink-muted);
}

@container (min-width: 8.5rem) {
  .month-day-link.day-column-head {
    display: flex;
    justify-content: flex-start;
    align-items: baseline;
    min-height: var(--tap-dense);
    padding: var(--space-1) var(--space-2);
  }

  .day-column-bar-month {
    margin-bottom: 0;
  }

  .day-column-weather-month.day-column-weather {
    display: flex;
    font-size: var(--text-xs);
  }

  .month-dots {
    display: none;
  }

  .month-day-body {
    display: grid;
    gap: var(--space-1);
    padding: 0 var(--space-2) var(--space-2);
  }
}

@media (min-width: 64rem) {
  .month-weekday-short {
    display: none;
  }

  .month-weekday-long {
    display: inline;
  }

  .month-detail {
    display: none;
  }
}