.date-field{display:block;position:relative;min-width:0;font-weight:normal}
.date-input-row{display:flex;align-items:stretch;gap:.4rem}
.date-input-row input.date-input{min-width:0;flex:1;width:100%}
.date-input-row [data-date-toggle]{flex:none;padding:.45rem .65rem;border:1px solid #b9cbd5;border-radius:7px;background:#f1f6f8;color:#164e60;cursor:pointer;font:inherit;font-size:.85rem}
.date-format-hint{display:block;font-size:.75rem;color:#526778;margin:.15rem 0 0}
.date-calendar{display:block;position:absolute;top:100%;left:0;z-index:40;width:19rem;max-width:calc(100vw - 3rem);padding:.75rem;border:1px solid #b9cbd5;border-radius:10px;background:white;box-shadow:0 6px 24px #102c3f33;color:#153145}
.date-calendar-head{display:flex;align-items:center;gap:.3rem;margin-bottom:.5rem}
.date-field .date-calendar-head select[data-date-month]{flex:1 1 auto;min-width:6.5rem;width:auto;padding:.4rem}
.date-field .date-calendar-head input[data-date-year]{flex:0 0 4rem;width:4rem;max-width:4rem;min-width:0;padding:.4rem;box-sizing:border-box}
.date-calendar-head>button{flex:none}
.date-calendar button{font:inherit;cursor:pointer;border:1px solid transparent;background:#f1f6f8;color:#173d50;border-radius:5px;padding:.45rem;min-height:2.15rem}
.date-calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.15rem;text-align:center}
.date-calendar-grid .date-weekday{padding:.25rem 0;font-size:.8rem;color:#526778}
.date-calendar-grid [data-other-month="true"]{color:#6c7e8a;background:#fff}
.date-calendar-grid [aria-pressed="true"]{background:#145c66;color:#fff}
.date-calendar button:disabled{opacity:.35;cursor:default}
.date-calendar button:focus-visible,.date-input-row button:focus-visible{outline:3px solid #167e91;outline-offset:2px}
.date-calendar [data-date-close]{display:block;margin:.5rem 0 0 auto}
.date-field [hidden]{display:none!important}