.month-view .month-scroll { overflow: auto; }
.month-calendar { min-width: 650px; height: 100%; min-height: calc(var(--month-weeks) * 112px + 32px); display: flex; flex-direction: column; }
.month-weekdays { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); position: sticky; top: 0; z-index: 5; background: var(--surface); border-bottom: 1px solid var(--line); }
.month-weekdays span { padding: 10px 0; text-align: center; font-size: 10px; color: var(--muted); }
.month-days { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); grid-template-rows: repeat(var(--month-weeks),minmax(0,1fr)); flex: 1; }
.month-day { min-width: 0; padding: 4px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.month-day:nth-child(7n) { border-right: 0; }
.month-day.outside-month { background: var(--bg); }
.month-date { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 1px 3px 4px; border: 0; background: transparent; }
.month-date strong { width: 23px; height: 23px; display: grid; place-items: center; font-size: 11px; font-weight: 500; border-radius: 50%; }
.month-date small { font-size: 9px; color: var(--muted); }
.month-day.outside-month .month-date strong { color: var(--muted); }
.month-day.is-today .month-date strong { background: var(--ink); color: var(--surface); }
.month-date:hover strong { background: var(--soft); }
.month-events { display: grid; gap: 2px; }
.month-event { display: flex; align-items: center; gap: 4px; width: 100%; min-width: 0; padding: 2px 3px; border: 0; border-radius: 3px; background: transparent; text-align: left; font-size: 10px; line-height: 13px; }
.month-event > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.month-event small { font-size: 8px; color: var(--muted); flex-shrink: 0; }
.month-event-mark { width: 5px; height: 5px; border-radius: 50%; background: var(--marker-color); flex-shrink: 0; }
.month-range-event { background: color-mix(in srgb,var(--marker-color) 7%,var(--surface)); }
.month-range-event .month-event-mark { height: 9px; border-radius: 2px; }
.month-event:hover, .month-event.preview-selected, .month-event.selected-task { background: color-mix(in srgb,var(--marker-color) 13%,var(--surface)); }
.month-overflow { justify-self: end; border: 1px solid var(--line); background: transparent; color: var(--muted); border-radius: 8px; font-size: 9px; height: 17px; min-width: 22px; padding: 0 4px; }
.month-overflow:hover { background: var(--soft); color: var(--ink); }
.week-navigation [data-month-today] { height: 27px; min-width: 48px; padding: 0 11px; border: 0; background: transparent; font-size: 11px; color: var(--muted); }
.week-navigation [data-month-today]:disabled { opacity: 1; color: var(--ink); cursor: default; }
.week-navigation [data-month-step] { width: 27px; height: 27px; padding: 5px; border-radius: 4px; }
.week-navigation [data-month-step]:hover { background: var(--bg); }
.month-picker-heading { display: grid; grid-template-columns: 28px 1fr 28px; gap: 10px; align-items: center; margin-bottom: 12px; }
.month-picker-heading input { width: 100%; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); color: var(--ink); padding: 7px; text-align: center; font-size: 12px; }
.month-picker-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; }
.month-picker-grid button { padding: 12px 4px; border: 1px solid transparent; border-radius: 4px; background: transparent; font-size: 12px; }
.month-picker-grid button:hover { border-color: var(--line); background: var(--bg); }
.month-picker-grid button.selected { background: var(--soft); }

a.month-event { text-decoration: none; color: var(--ink); }
@media (max-width: 760px) {
  .month-view .month-calendar { min-width:0; width:100%; min-height:calc(var(--month-weeks) * 86px + 32px); }
  .month-view .task-list > .month-scroll { min-height:0; }
  .month-weekdays span { padding:9px 0; font-size:9px; }
  .month-days { grid-template-rows:repeat(var(--month-weeks),minmax(86px,auto)); }
  .month-day { padding:3px 1px; }
  .month-date { flex-direction:row; align-items:center; justify-content:center; gap:0; padding:0; height:30px; min-height:30px; }
  .month-date strong { width:24px; height:24px; font-size:11px; }
  .month-date small { display:none; }
  .month-events { gap:2px; }
  .month-event { padding:3px 1px; gap:2px; font-size:9px; line-height:12px; min-height:18px; }
  .month-event small { display:none; }
  .month-event-mark { width:4px; height:4px; }
  .month-range-event .month-event-mark { height:8px; }
  .month-overflow { min-height:20px; padding:0 3px; }
}