.date-field { position:relative; min-width:0; }
.date-field input { padding-right:38px; }
.calendar-toggle { position:absolute; right:5px; top:3px; width:34px; height:40px; border:0; background:none; color:var(--rust); display:grid; place-items:center; }
.calendar-toggle svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.5; }
.calendar-panel { position:absolute; z-index:10; top:calc(100% + 8px); right:0; width:320px; max-width:84vw; padding:14px; border:1px solid #c6c7b6; border-radius:12px; background:var(--paper); box-shadow:0 12px 32px #30352824; color:var(--ink); }
.calendar-panel[hidden] { display:none; }
.calendar-panel.calendar-above { top:auto; bottom:calc(100% + 8px); }
.signup:has(.calendar-panel:not([hidden])) { overflow:visible; z-index:4; }
.signup-inner:has(.calendar-panel:not([hidden])) { z-index:3; }
.calendar-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.calendar-heading button,.calendar-close { border:0; background:transparent; color:var(--rust); min-height:36px; padding:6px 10px; }
.calendar-heading button { font-size:24px; }
.calendar-heading button:disabled { opacity:.25; cursor:default; }
.calendar-heading strong { font:20px var(--serif); text-transform:capitalize; }
.calendar-panel table { width:100%; table-layout:fixed; border-collapse:collapse; margin-top:8px; }
.calendar-panel th { font:11px var(--sans); color:var(--muted); height:28px; }
.calendar-panel td { padding:2px; text-align:center; }
.calendar-panel td button { width:100%; height:34px; padding:0; border:1px solid #d7d5c5; border-radius:6px; background:#e8ebdf; font:13px var(--sans); color:var(--ink); }
.calendar-panel td button:disabled { border-color:transparent; background:none; color:#a4a69d; cursor:default; }
.calendar-panel td button.calendar-preview { background:#f2d5c6; border-color:var(--rust); }
.calendar-panel td button[aria-pressed=true] { background:var(--rust); color:var(--paper); border-color:var(--rust); }
.calendar-panel td button[aria-current=date] { text-decoration:underline; text-underline-offset:3px; }
.calendar-outside { opacity:.5; }
.calendar-bottom { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:7px; }
.calendar-bottom p { font:11px/1.4 var(--sans); color:#72786a; }
.calendar-close { font-size:12px; }
@media(max-width:700px) { .calendar-panel { width:100%; max-width:none; padding:10px; } }