/* popup calendar (see src/datepicker.js) */
.dp {
  position: fixed; z-index: 20; width: 288px; padding: 12px 12px 10px; color: var(--ink);
  border-radius: 24px;
  background: linear-gradient(160deg, rgba(40, 46, 96, .97), rgba(18, 22, 46, .98));
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .55), 0 0 100px rgba(120, 100, 220, .18);
  transform-origin: var(--ox, 50%) var(--oy, 0);
}
.dp.in { animation: dpIn .26s cubic-bezier(.2, .85, .25, 1); }
@keyframes dpIn { from { opacity: 0; transform: scale(.92); } }
@media (prefers-reduced-motion: reduce) { .dp.in { animation: none; } }

.dp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.dp-title { font-weight: 600; font-size: 15px; }
.dp-nav {
  width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%;
  background: none; color: var(--ink-dim); transition: background .2s, color .2s;
}
.dp-nav:hover { background: rgba(255, 255, 255, .12); color: var(--ink); }

.dp-week, .dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.dp-week span { text-align: center; font-size: 11px; letter-spacing: .08em; color: var(--ink-dim); padding: 4px 0 6px; }
.dp-grid { grid-auto-rows: 38px; }
.dp-day {
  width: 36px; height: 36px; margin: auto; padding: 0; border-radius: 50%; border: 1px solid transparent;
  background: none; font-size: 14px; transition: background .15s;
}
.dp-day:hover { background: rgba(255, 255, 255, .14); }
.dp-day.past { color: var(--ink-dim); }
.dp-day.today { border-color: rgba(255, 255, 255, .5); }
.dp-day.sel, .dp-day.sel:hover { background: var(--violet); border-color: var(--violet); color: #15122b; font-weight: 600; }