.date-pick{position:relative;}
.date-pick-value{
  position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;border:0;padding:0;
}
.date-pick-btn{
  width:100%;text-align:left;font:inherit;padding:10px 12px;
  border:1px solid var(--line);background:var(--paper);color:var(--ink);
  border-radius:1px;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.date-pick-btn.is-empty{
  color:var(--ink-soft);
  letter-spacing:0.14em;
  font-variant-numeric:tabular-nums;
}
.date-pick-btn:hover{border-color:var(--ink);}
.date-cal{
  position:absolute;z-index:70;top:calc(100% + 6px);left:0;width:100%;min-width:228px;
  background:var(--paper);border:1px solid var(--line);padding:12px;
  box-shadow:0 16px 40px rgba(21,19,14,.1);
}
.date-cal-head{display:flex;align-items:stretch;justify-content:space-between;gap:6px;margin-bottom:10px;}
.date-cal-pickers{display:flex;gap:6px;flex:1;min-width:0;}
.date-cal-switch{
  flex:1;min-width:0;
  display:flex;flex-direction:column;align-items:flex-start;gap:1px;
  text-align:left;
  border:1px solid var(--line);background:var(--paper-deep);
  font:inherit;color:var(--ink);cursor:pointer;
  padding:5px 8px 6px;border-radius:1px;
}
.date-cal-switch:hover:not(:disabled){border-color:var(--ink);background:#fff;}
.date-cal-switch.is-on,
.date-cal-switch:disabled{
  background:var(--ink);color:var(--paper);border-color:var(--ink);cursor:default;
}
.date-cal-kicker{
  font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:500;color:var(--ink-soft);line-height:1;
}
.date-cal-switch.is-on .date-cal-kicker,
.date-cal-switch:disabled .date-cal-kicker{color:var(--gold-soft);}
.date-cal-switch-val{
  display:flex;align-items:center;gap:5px;width:100%;
  font-size:13px;font-weight:600;line-height:1.2;
}
.date-cal-caret{
  display:inline-block;width:0;height:0;margin-left:auto;flex-shrink:0;
  border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:5px solid currentColor;opacity:.7;
}
.date-cal-switch.is-on .date-cal-caret,
.date-cal-switch:disabled .date-cal-caret{opacity:.85;}
.date-cal-nav{
  width:32px;flex-shrink:0;
  border:1px solid var(--line);background:var(--paper);
  font:inherit;font-size:18px;color:var(--ink);cursor:pointer;line-height:1;
}
.date-cal-nav:hover:not(:disabled){background:var(--paper-deep);border-color:var(--ink);}
.date-cal-nav:disabled{opacity:.35;cursor:default;}
.date-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;}
.date-cal-choice{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;}
.date-cal-chip{
  border:1px solid transparent;background:transparent;font:inherit;font-size:13px;padding:10px 4px;
  color:var(--ink);cursor:pointer;
}
.date-cal-chip:hover{background:var(--paper-deep);border-color:var(--line);}
.date-cal-chip.is-on{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.date-cal-chip.is-on:hover{background:var(--ink);}
.date-cal-dow{font-size:11px;color:var(--ink-soft);text-align:center;padding:6px 0;}
.date-cal-empty{min-height:32px;}
.date-cal-day{
  aspect-ratio:1;border:0;background:transparent;font:inherit;font-size:13px;
  color:var(--ink);cursor:pointer;border-radius:99px;
}
.date-cal-day:hover:not(:disabled){background:var(--paper-deep);}
.date-cal-day.is-today{box-shadow:inset 0 0 0 1px var(--gold);}
.date-cal-day.is-on{background:var(--ink);color:var(--paper);}
.date-cal-day.is-on:hover{background:var(--ink);}
.date-cal-day:disabled{opacity:.32;cursor:default;}

.join-modal .date-pick.is-open .date-cal{
  position:absolute;top:calc(100% + 6px);min-width:0;z-index:80;
}
.join-field .date-pick-btn{
  height:36px;min-height:36px;padding:7px 10px;font-size:14px;background:#fff;
}
.join-field .date-pick-btn::after{
  content:"";width:7px;height:7px;flex-shrink:0;margin-left:auto;
  border-right:1.5px solid var(--ink-soft);border-bottom:1.5px solid var(--ink-soft);
  transform:rotate(45deg) translateY(-2px);opacity:.7;
}
.join-field .date-pick-btn:not(.is-empty){letter-spacing:0;color:var(--ink);}