/* DateField (app/(site)/_lib/components/DateField.tsx): the website's own date picker, so a date reads the same on
   every phone whatever its locale (2026-10-27). The button takes the form's own input class (.eq__input,
   .res-form__input); these rules only add the layout and the calendar. Theme tokens only, so each time theme works. */
.datefield { position: relative; width: 100%; }
.datefield__button {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  text-align: left; cursor: pointer;
}
.datefield__button:disabled { cursor: not-allowed; opacity: 0.55; }
.datefield__button svg { flex: none; color: var(--color-text-secondary); }
.datefield__placeholder { color: var(--color-text-secondary); }
.datefield__long {
  display: block; margin-top: 0.35rem; font-size: 0.8125rem; line-height: 1.4; color: var(--color-text-secondary);
}
.datefield__pop {
  position: absolute; z-index: 40; top: calc(100% + 6px); left: 0;
  width: min(20rem, calc(100vw - 2rem)); padding: 0.75rem;
  background: var(--color-surface); color: var(--color-text-primary);
  border: 1px solid var(--color-border-strong); border-radius: var(--control-radius, 6px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}
.datefield__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; }
.datefield__month { font-weight: 600; text-transform: capitalize; }
.datefield__nav {
  width: 2.25rem; height: 2.25rem; font-size: 1.25rem; line-height: 1; cursor: pointer;
  background: transparent; color: inherit; border: 1px solid var(--color-border); border-radius: var(--control-radius, 6px);
}
.datefield__nav:disabled { opacity: 0.35; cursor: default; }
.datefield__row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.datefield__wd { padding: 0.25rem 0; text-align: center; font-size: 0.75rem; color: var(--color-text-secondary); }
.datefield__day, .datefield__blank { aspect-ratio: 1; min-height: 2.25rem; }
.datefield__day {
  font: inherit; font-size: 0.9375rem; cursor: pointer; color: inherit;
  background: transparent; border: 1px solid transparent; border-radius: var(--control-radius, 6px);
}
.datefield__day:hover:not(:disabled), .datefield__day:focus-visible { border-color: var(--color-text-primary); outline: none; }
.datefield__day.is-today { border-color: var(--color-border-strong); }
.datefield__day.is-selected { background: var(--color-accent); color: var(--color-on-accent); border-color: var(--color-accent); }
.datefield__day:disabled { opacity: 0.3; cursor: default; }