/* The date chooser shares the neutral navigation palette, including keyboard focus. */
.dateCalendar {
  position: fixed;
  margin: 0;
  width: min(320px,calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  padding: 14px;
  overflow: auto;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--neutral-300);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgb(32 33 36 / 14%),0 2px 6px rgb(32 33 36 / 5%);
}
.dateCalendar::backdrop {background:transparent;}
.dateCalendarHeader {display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.dateCalendarHeader h2 {font-size:13px;font-weight:400;color:var(--color-secondary);margin:0;}
.dateCalendar .button--icon {width:36px;min-width:36px;min-height:36px;padding:8px;}
.dateCalendarHeader .icon {width:18px;height:18px;}
.dateCalendarMonth {display:flex;align-items:center;gap:3px;margin-bottom:10px;}
.dateCalendarSelects {display:flex;justify-content:center;flex:1;min-width:0;}
.dateCalendar select {min-width:0;border:0;background:transparent;padding:8px 3px;font-size:14px;font-weight:700;cursor:pointer;border-radius:6px;}
.dateCalendarWeek,.dateCalendarDays {display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px;}
.dateCalendarWeek {margin-bottom:6px;text-align:center;font-size:11px;color:var(--color-muted);}
.dateCalendarWeek span:nth-last-child(-n+2) {color:var(--color-weekend);}
.dateCalendarDay {position:relative;aspect-ratio:1;display:grid;place-items:center;border:1px solid transparent;border-radius:9px;background:transparent;font-size:14px;font-weight:400;padding:0;font-variant-numeric:tabular-nums;}
.dateCalendarDay.isWeekend:not(:disabled) {color:var(--color-weekend);}
.dateCalendarDay:hover:not(:disabled) {background:var(--neutral-100);}
.dateCalendarDay[aria-pressed=true] {background:var(--neutral-200);color:var(--color-heading);font-weight:700;}
.dateCalendarDay[aria-current=date]::after {content:'';position:absolute;bottom:4px;width:3px;height:3px;border-radius:50%;background:currentColor;}
.dateCalendarDay:disabled {color:var(--neutral-400);cursor:default;}
.dateCalendarDay.isOtherMonth {color:var(--neutral-300);}
.dateCalendar :is(button,select):focus-visible {outline:2px solid var(--neutral-500);outline-offset:1px;}
.dateCalendarFooter {display:flex;justify-content:center;border-top:1px solid var(--neutral-200);margin-top:12px;padding-top:5px;}
.dateCalendarFooter .button {width:100%;font-size:12px;min-height:36px;padding:8px;}
@media(max-width:760px) {
  .dateCalendar {width:min(360px,calc(100vw - 24px));padding:12px;}
  .dateCalendar select {font-size:16px;}
}