/* Uses the same field geometry and palette as Potok's form controls. */
.calendar-field{position:relative;min-width:0;width:100%}
.calendar-field>.calendar-native{position:absolute!important;inset:0 auto auto 0!important;width:1px!important;height:1px!important;min-height:0!important;padding:0!important;border:0!important;clip-path:inset(50%);opacity:0;pointer-events:none}
.calendar-trigger{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-width:0;min-height:50px;padding:12px 13px;border:1px solid #dbe2ee;border-radius:12px;background:var(--paper);color:var(--ink);font-size:14px;line-height:1.45;text-align:left}
.calendar-trigger>span{min-width:0;overflow-wrap:anywhere}.calendar-trigger>svg{flex:none;width:19px;height:19px;color:var(--muted)}
.calendar-trigger.is-empty>span{color:var(--muted)}
.calendar-trigger:focus,.calendar-trigger[aria-expanded=true]{outline:none;border-color:#8997aa;box-shadow:inset 0 -1px 0 #8997aa}
.calendar-trigger:focus-visible{outline:none;box-shadow:inset 0 -2px 0 #78889e}
.calendar-trigger[aria-invalid=true]{border-color:var(--red)}.calendar-trigger[aria-invalid=true]:focus-visible{box-shadow:inset 0 -2px 0 var(--red)}
.calendar-trigger:disabled{background:var(--bg);color:var(--muted);cursor:default}
.calendar-popover{position:fixed;z-index:110;margin:0;padding:10px;border:1px solid var(--line);border-radius:16px;background:var(--paper);color:var(--ink);box-shadow:0 10px 32px #182b4624;overflow:auto;overscroll-behavior:contain;touch-action:pan-y;font-size:14px;font-variant-numeric:tabular-nums;isolation:isolate}
.calendar-popover svg,.calendar-trigger svg{fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
.calendar-heading{display:flex;align-items:center;gap:1px;margin-bottom:5px}
.calendar-popover .calendar-nav{display:grid;place-items:center;flex:none;min-height:40px;width:32px;padding:0;border-radius:9px;color:var(--muted)}
.calendar-nav svg{height:18px;width:18px}.calendar-popover .calendar-close{margin-left:2px;width:28px}
.calendar-titles{display:flex;align-items:center;justify-content:center;flex:1;min-width:0;gap:1px;font-weight:650}
.calendar-popover .calendar-title{min-height:40px;padding:5px 6px;border-radius:8px;font-size:14px;font-weight:650;white-space:nowrap}
.calendar-body{min-width:0}.calendar-grid{display:flex;flex-direction:column;gap:2px}.calendar-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px}
.calendar-week>[role=columnheader]{display:grid;place-items:center;height:27px;color:var(--muted);font-size:11px;font-weight:500}
.calendar-popover .calendar-day{position:relative;min-height:38px;padding:2px;border:1px solid transparent;border-radius:9px;color:var(--ink);font-size:13px;line-height:1.2;font-weight:500}
.calendar-popover .calendar-day.is-adjacent{color:var(--muted);font-weight:400}
.calendar-popover .calendar-day[aria-current=date]:after{content:'';position:absolute;bottom:3px;left:calc(50% - 2px);width:4px;height:4px;border-radius:50%;background:currentColor}
.calendar-popover .calendar-day[aria-selected=true]{background:var(--blue);color:#fff;font-weight:650}
.calendar-popover .calendar-day:disabled{opacity:.35}
.calendar-popover button:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.calendar-popover .calendar-day[aria-selected=true]:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.calendar-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;min-height:267px;align-content:center}
.calendar-popover .calendar-option{min-height:48px;padding:7px 3px;border-radius:10px;font-size:12px}
.calendar-popover .calendar-option[aria-pressed=true]{background:var(--blue-soft);color:var(--blue);font-weight:650}
.calendar-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px;padding-top:5px;border-top:1px solid var(--line)}
.calendar-popover .calendar-today,.calendar-popover .calendar-clear{min-height:36px;padding:6px 9px;border-radius:8px;font-size:12px;font-weight:550;color:var(--blue)}
.calendar-popover .calendar-clear{color:var(--muted)}
.calendar-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.ux-form-meta .calendar-trigger{font-size:12px;min-height:46px;padding:10px 8px;gap:5px}.ux-form-meta .calendar-trigger>svg{width:16px;height:16px}
.plan-sheet form[data-plans-design] .calendar-trigger{min-height:46px;font-size:13px}
html[data-theme=dark] .calendar-trigger{background:var(--theme-inset);border-color:#3a4c65}
html[data-theme=dark] .calendar-trigger:focus-visible{box-shadow:inset 0 -2px 0 #b0c0d7}
html[data-theme=dark] .calendar-trigger[aria-expanded=true]{border-color:#8997aa}
html[data-theme=dark] .calendar-trigger[aria-invalid=true]{border-color:var(--red)}
html[data-theme=dark] .calendar-popover{background:var(--theme-raised);border-color:#425470;box-shadow:0 12px 32px #0005}
html[data-theme=dark] .calendar-popover .calendar-day[aria-selected=true]{color:#13213c}
@media(hover:hover){.calendar-popover button:not(:disabled):not([aria-selected=true]):hover{background:var(--blue-soft)}}
@media(max-width:359px){.calendar-popover{padding:8px}.calendar-popover .calendar-nav{width:28px}.calendar-popover .calendar-title{padding-inline:4px;font-size:13px}.calendar-popover .calendar-day{min-height:37px}}
@media(forced-colors:active){.calendar-popover .calendar-day[aria-selected=true]{outline:2px solid Highlight;outline-offset:-2px}.calendar-trigger:focus-visible{outline:2px solid Highlight;outline-offset:2px}}

/* A compact date panel with controls large enough to use with one thumb. */
.calendar-field>.calendar-trigger{min-height:48px;padding:12px;border-radius:var(--ui-control-radius,12px);font-size:14px}
.calendar-popover{padding:10px;border-radius:var(--ui-card-radius,18px)}
.calendar-popover .calendar-heading{gap:0;margin-bottom:8px}
.calendar-popover .calendar-nav{width:44px;min-height:44px;border-radius:var(--ui-control-radius,12px)}
.calendar-popover .calendar-close{width:44px;margin-left:2px}
.calendar-popover .calendar-title{min-height:44px;padding:7px 5px;font-size:14px;border-radius:10px}
.calendar-popover .calendar-week>[role=columnheader]{height:28px;font-size:12px}
.calendar-popover .calendar-day{min-height:44px;border-radius:10px;font-size:14px}
.calendar-popover .calendar-option{min-height:48px;font-size:14px;border-radius:var(--ui-control-radius,12px)}
.calendar-popover .calendar-footer{margin-top:10px;padding-top:8px}
.calendar-popover .calendar-today,.calendar-popover .calendar-clear{min-height:44px;font-size:13px;padding:10px;border-radius:var(--ui-control-radius,12px)}
.ux-form-meta .calendar-field>.calendar-trigger{min-height:48px;font-size:13px;padding-inline:10px;gap:8px}
.plan-sheet form[data-plans-design] .calendar-field>.calendar-trigger{min-height:48px;font-size:14px}
@media(max-width:359px){.calendar-popover{padding:8px}.calendar-popover .calendar-title{font-size:13px;padding-inline:3px}.calendar-popover .calendar-day{min-height:44px}}

/* Report periods use the app's calendar surfaces, with no native month popup. */
.month-picker-sheet .month-picker-nav{display:flex;align-items:center;gap:4px;padding:4px;border-radius:var(--ui-nested-radius);background:var(--ui-nested);margin:4px 0 12px}
.month-picker-nav>.icon-button{flex:none;border-radius:var(--ui-control-radius);color:var(--muted)}
#report-year-open{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;flex:1;min-width:0;min-height:44px;border-radius:var(--ui-control-radius);font-size:18px;font-weight:650;font-variant-numeric:tabular-nums}
#report-year-action{font-size:11px;font-weight:500;line-height:1.3;color:var(--blue)}
.month-picker-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;min-height:216px;align-content:start}
.month-picker-options>button{position:relative;min-width:0;min-height:48px;padding:10px 3px;border:1px solid transparent;border-radius:var(--ui-control-radius);background:var(--ui-nested);color:var(--ink);font-size:14px}
.month-picker-options>button[aria-pressed=true]{background:var(--blue-soft);border-color:var(--blue);color:var(--blue);font-weight:650}
.month-picker-options>button[aria-current=date]:after{content:'';position:absolute;bottom:4px;left:calc(50% - 2px);width:4px;height:4px;border-radius:50%;background:var(--blue)}
.month-picker-sheet .month-picker-current{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:12px;background:var(--ui-track);color:var(--blue)}
.month-picker-current .icon{width:18px;height:18px}
.month-picker-sheet button:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
@media(hover:hover){.month-picker-options>button:not([aria-pressed=true]):hover{background:var(--ui-track)}}