/* The native date field stays editable and validates normally; the branded calendar expands in flow, never off-screen. */
.png-control{position:relative;min-width:0;margin-top:8px;--png-wine:#701c32;--png-ink:#291b20;--png-border:#d8cbcd;--png-rose:#f6ecef}
.png-control input{margin-top:0!important}.png-date>input{padding-right:52px!important;width:100%;min-width:0}
.png-date>input::-webkit-calendar-picker-indicator{display:none}
.png-calendar-toggle{position:absolute;right:5px;top:5px;width:44px;height:44px;display:grid;place-items:center;border:0;background:transparent;color:var(--png-wine);border-radius:7px;cursor:pointer}
.png-calendar-toggle:hover{background:var(--png-rose)}
.png-control-panel{margin-top:10px;padding:16px;background:#fffcfa;border:1px solid var(--png-border);border-radius:12px;box-shadow:0 8px 25px #3c162111;max-width:100%;min-width:0;color:var(--png-ink);font-family:"Instrument Sans",Arial,sans-serif;letter-spacing:normal;box-sizing:border-box}
.png-control-panel[hidden]{display:none!important}.png-calendar-heading{display:flex;align-items:center;justify-content:space-between;gap:5px;margin-bottom:10px}.png-calendar-month{font-size:15px;font-weight:600;text-align:center}.png-month-arrow{border:1px solid var(--png-border);width:36px;height:36px;border-radius:50%;background:transparent;color:var(--png-wine);font:25px/1 "Instrument Sans",Arial;cursor:pointer;flex:none}
.png-calendar-weekdays,.png-calendar-row{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px}.png-calendar-weekdays{font-size:14px;color:#766268;text-align:center;margin-bottom:7px}.png-calendar-cell{min-width:0}.png-calendar-day{width:100%;min-width:0;min-height:36px;border:0;border-radius:6px;background:transparent;color:var(--png-ink);font:14px/1.2 "Instrument Sans",Arial,sans-serif;cursor:pointer;padding:6px 0;letter-spacing:normal}.png-calendar-day.is-outside{color:#8b777e}.png-calendar-day[aria-current="date"]{box-shadow:inset 0 0 0 1px var(--png-wine)}.png-calendar-day:hover:not(:disabled){background:var(--png-rose)}.png-calendar-day.is-selected{background:var(--png-wine)!important;color:white}.png-control button:disabled{opacity:.28;cursor:default}.png-calendar-footer{border-top:1px solid #e9dfe1;margin-top:12px;padding-top:6px;display:flex;justify-content:space-between;gap:4px}.png-calendar-text{background:none;border:0;color:var(--png-wine);font:14px/1.4 "Instrument Sans",Arial,sans-serif;min-height:36px;padding:6px 4px;cursor:pointer}.png-control-help{font:14px/1.5 "Instrument Sans",Arial,sans-serif;color:#79666d;margin:4px 0 0!important}
.png-select-trigger{width:100%;min-height:54px;display:flex;align-items:center;justify-content:space-between;gap:15px;padding:12px 16px;background:#fffdfc;border:1px solid #bdb1b4;border-radius:7px;color:#261b1f;font:inherit;font-size:14px;line-height:1.6;text-align:left;cursor:pointer;box-sizing:border-box}.png-select-trigger.is-placeholder{color:#75666c}.png-select-chevron{font:24px/1 "Instrument Sans",Arial;color:var(--png-wine);flex:none}.png-select-trigger[aria-expanded="true"]{border-color:var(--png-wine);box-shadow:0 0 0 2px #701c3210}.png-select .png-control-panel{max-height:280px;overflow-y:auto;padding:6px;overscroll-behavior:contain}.png-select-option{font:14px/1.5 "Instrument Sans",Arial,sans-serif;padding:12px;border-radius:7px;cursor:pointer;min-height:44px;box-sizing:border-box}.png-select-option:hover,.png-select-option.is-active{background:var(--png-rose)}.png-select-option[aria-selected="true"]{color:var(--png-wine);font-weight:700}.png-select-option[aria-selected="true"]:after{content:' ✓';float:right}.png-select-option[aria-disabled="true"]{opacity:.4;cursor:default}.png-native-select{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important;padding:0!important;margin:0!important;border:0!important;overflow:hidden!important}
.png-control button:focus-visible,.png-select-trigger[aria-invalid="true"]{outline:2px solid var(--png-wine);outline-offset:3px}
@media(max-width:600px){.png-select-trigger{font-size:16px}.png-calendar-day{min-height:40px}.png-control-panel{padding:12px}.png-calendar-month{font-size:16px}.png-select .png-control-panel{padding:6px}}
@media(prefers-reduced-motion:reduce){.png-control *{scroll-behavior:auto!important}}