.calendar-zoom[hidden] { display: none; }
.calendar-zoom { display: grid; grid-template-columns: 30px minmax(70px, 110px) 30px auto; align-items: center; gap: 4px; min-width: 0; max-width: 100%; }
.calendar-zoom .button { box-sizing: border-box; min-height: 34px; padding: 4px; color: var(--color-primary); font-size: 19px; }
.calendar-zoom input[type=range] { display: block; width: 100%; min-width: 0; min-height: 36px; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; accent-color: var(--color-primary); cursor: pointer; }
.calendar-zoom input[type=range]:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: 5px; }
.calendar-zoom output { color: var(--color-muted); font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 600px), (pointer: coarse) {
  .calendar-zoom { grid-template-columns: 44px minmax(40px, 1fr) 44px auto; }
  .calendar-zoom .button, .calendar-zoom input[type=range] { min-height: 44px; }
}