/* ============================================================
   Kit — calendar.css   (month calendar / date picker)
   Structure adapted from Untitled UI's date-picker calendar,
   restyled to Loop tokens (accent, radii, neutral greys). Pairs
   with kit/calendar.js (BPCalendar.render) and drops inside a
   .bp-menu--pop for a "date range" dropdown, or stands alone.
     .bp-cal            the calendar block
     .bp-cal__head      month title + prev/next
     .bp-cal__grid      7-col weekday + day grid
     .bp-cal__day       one day (round; accent when selected)
   ============================================================ */

.bp-cal { width: 280px; font-family: var(--bp-font); user-select: none; }
.bp-cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.bp-cal__presets { display: flex; gap: 8px; margin-bottom: 10px; }
.bp-cal__presets .bp-btn { flex: 1; }
.bp-cal__title { font-size: 14px; font-weight: 600; color: var(--bp-surface-foreground); }
.bp-cal__nav {
  flex: none; width: 32px; height: 32px; display: grid; place-items: center;
  border: none; background: transparent; border-radius: var(--bp-radius-sm); corner-shape: squircle;
  color: var(--bp-surface-muted); cursor: pointer; transition: background .12s ease, color .12s ease;
}
.bp-cal__nav:hover { background: rgba(17, 24, 39, .05); color: var(--bp-surface-foreground); }
.bp-cal__nav svg { width: 18px; height: 18px; display: block; }

.bp-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.bp-cal__wd { height: 34px; display: grid; place-items: center; font-size: 12px; font-weight: 500; color: var(--bp-surface-muted); }
.bp-cal__cell { height: 38px; display: grid; place-items: center; }
.bp-cal__day {
  position: relative; width: 34px; height: 34px; display: grid; place-items: center;
  border: none; background: transparent; border-radius: 50%; corner-shape: round;
  font: inherit; font-size: 13px; color: var(--bp-surface-foreground); cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.bp-cal__day:hover { background: var(--bp-accent-tint); }
.bp-cal__day.is-muted { color: var(--bp-surface-muted); opacity: .45; pointer-events: none; }
.bp-cal__day.is-today { font-weight: 600; }
.bp-cal__day.is-today::after {
  content: ""; position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 50%; background: var(--bp-accent);
}
.bp-cal__day.is-selected { background: var(--bp-accent); color: var(--bp-accent-foreground); font-weight: 600; }
.bp-cal__day.is-selected::after { background: var(--bp-accent-foreground); }
.bp-cal__day.is-disabled { color: var(--bp-surface-muted); opacity: .35; pointer-events: none; }
/* range span: a continuous tint bar across the cells, rounded at each end / week edge */
.bp-cal__cell--range { background: var(--bp-accent-tint); }
.bp-cal__cell--range.rl { border-top-left-radius: 999px; border-bottom-left-radius: 999px; }
.bp-cal__cell--range.rr { border-top-right-radius: 999px; border-bottom-right-radius: 999px; }