.preferred-date { min-width:0; margin:0; padding:0; border:0; }
.preferred-date legend { padding:0; font-weight:650; }
.preferred-date legend small, #preference-help, .preferred-date .selection { color:var(--hl-muted); }
.preferred-date legend small { font-weight:400; }
#preference-help { margin:.25rem 0 .75rem; }
.preferred-date [hidden] { display:none; }
.month-chooser { max-width:25rem; padding:.6rem; border:1px solid var(--hl-line); border-radius:var(--hl-radius-surface); background:var(--hl-surface); }
.month-controls, .preferred-date .selection { display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.month-controls strong { font-family:var(--hl-display); font-size:1.3rem; }
.month-controls button, .month-days button, .selection button { border:0; min-width:0; padding:0; min-height:44px; background:transparent; color:var(--hl-ink); font:inherit; }
.month-controls button { min-width:44px; font-size:1.6rem; }
.week-labels, .month-days { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); text-align:center; }
.week-labels { margin-top:.4rem; color:var(--hl-muted); font-size:.78rem; }
.month-days button { border:1px solid transparent; border-radius:var(--hl-radius-control); }
.month-days button[aria-current="date"] { border-color:var(--hl-line); }
.month-days button[aria-pressed="true"] { color:white; background:var(--hl-accent); }
.preferred-date .selection { min-height:44px; margin-top:.35rem; border-top:1px solid var(--hl-line); font-size:.9rem; }
.selection button { color:var(--hl-accent); text-decoration:underline; }
.preferred-date details summary { display:list-item; cursor:pointer; min-height:44px; padding-top:.55rem; color:var(--hl-accent); }
@media(max-width:359px) { .month-chooser { margin-inline:-.75rem; padding:.15rem; } }

.date-keys { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }