.date-picker {position:relative;display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.date-picker > input {flex:1;min-width:150px}
.date-picker > button {flex:none}
.date-calendar {position:absolute;top:100%;left:0;z-index:50;width:min(320px,100%);padding:12px;background:#fff;color:#172b35;border:1px solid #cbd5df;border-radius:12px;box-shadow:0 8px 30px #152b3533}
.date-calendar[hidden] {display:none}
.date-calendar-header {display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.date-calendar-grid {display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px;text-align:center}
.date-calendar button {min-height:36px;border:1px solid transparent;border-radius:6px;background:#edf3f6;color:#172b35;cursor:pointer;font:inherit;padding:4px}
.date-calendar button:disabled {opacity:.35;cursor:default}
.date-calendar button:not(:disabled):hover,.date-calendar button[aria-pressed=true] {background:#174d48;color:#fff}
.date-calendar button:focus-visible {outline:3px solid #167fce;outline-offset:1px}
.date-calendar-header button {width:36px}