.calendar-view { padding-block: 1.2rem 3rem; }
.calendar-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; }
.calendar-header h1 { margin: 0; font: 700 clamp(1.6rem, 5vw, 2.2rem)/1.15 var(--reader-font-heading); }
.calendar-year-controls { display: flex; min-width: 0; align-items: center; gap: .4rem; font-family: var(--reader-font-ui); }
.calendar-year-controls button,
.calendar-year-controls select { min-height: 2.5rem; color: var(--reader-text); background: var(--reader-surface); border: 1px solid var(--reader-border); border-radius: 5px; }
.calendar-year-controls button { min-width: 2.5rem; cursor: pointer; }
.calendar-year-controls select { min-width: 0; padding: .35rem .5rem; }
.calendar-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .85rem; align-items: start; }
.month-card { min-width: 0; padding: .75rem; color: var(--reader-text); background: var(--reader-surface); border: 1px solid var(--reader-border); border-radius: var(--reader-radius); box-shadow: var(--reader-shadow); }
.month-card h2 { margin: 0 0 .5rem; color: var(--reader-heading); font: 700 1rem/1.25 var(--reader-font-ui); text-transform: capitalize; }
.calendar-weekdays,
.month-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; min-width: 0; }
.calendar-weekdays span { color: var(--reader-muted); font: 700 .65rem/1.5 var(--reader-font-ui); text-align: center; }
.calendar-day { position: relative; display: grid; place-items: center; min-width: 0; min-height: 2rem; padding: .2rem .1rem; color: var(--reader-muted); background: transparent; border: 1px solid transparent; border-radius: 4px; font: 500 .72rem/1 var(--reader-font-ui); }
button.calendar-day { cursor: pointer; color: var(--reader-text); background: var(--reader-label-bg); border-color: var(--reader-label-border); font-weight: 700; }
button.calendar-day:hover { border-color: var(--reader-link); }
.calendar-day.selected { outline: 2px solid var(--reader-link); outline-offset: 1px; }
.day-count { position: absolute; right: 1px; bottom: 1px; min-width: .85rem; padding: .08rem .18rem; color: var(--reader-surface); background: var(--reader-link); border-radius: 999px; font-size: .55rem; line-height: 1.15; text-align: center; }
.calendar-selection { margin-top: 1rem; padding: 1rem; color: var(--reader-text); background: var(--reader-surface); border: 1px solid var(--reader-border); border-radius: var(--reader-radius); }
.calendar-selection h2 { margin: 0 0 .7rem; color: var(--reader-heading); font: 700 1.05rem/1.3 var(--reader-font-ui); text-transform: capitalize; }
.calendar-selection-list { display: grid; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.calendar-post-link { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .35rem .75rem; width: 100%; min-width: 0; padding: .65rem; color: var(--reader-text); background: var(--reader-debug-bg); border: 1px solid var(--reader-border); border-radius: 5px; cursor: pointer; text-align: left; }
.calendar-post-title { min-width: 0; overflow-wrap: anywhere; font-weight: 700; }
.calendar-post-meta { color: var(--reader-muted); font-size: .78rem; overflow-wrap: anywhere; text-align: right; }
.calendar-empty { color: var(--reader-muted); }

@media (max-width: 900px) {
  .calendar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .calendar-grid { grid-template-columns: 1fr; }
  .calendar-header { align-items: flex-start; }
  .calendar-year-controls { width: 100%; }
  .calendar-year-controls select { flex: 1 1 auto; }
  .calendar-post-link { grid-template-columns: 1fr; }
  .calendar-post-meta { text-align: left; }
}