.calendar-wrap, .calendar-fallback { position: fixed; inset-inline-start: max(var(--help-edge), env(safe-area-inset-left)); inset-block-end: var(--help-bottom); z-index: 3; }
.calendar-trigger, .calendar-fallback summary { display: grid; place-items: center; width: 3rem; height: 3rem; padding: 0; border: 1px solid #55564d; border-radius: 50%; background: #292a26; color: #c4c5b9; cursor: pointer; list-style: none; transition: color 180ms, background 180ms, border-color 180ms; }
.calendar-fallback summary::-webkit-details-marker { display: none; }
.calendar-trigger:hover, .calendar-fallback summary:hover { background: #393b32; border-color: #7c7e6e; color: #f0efe5; }
.calendar-panel { position: absolute; bottom: 100%; inset-inline-start: 0; width: min(20rem, calc(100vw - 2 * var(--help-edge))); padding-bottom: .75rem; transform-origin: 1.5rem bottom; }
[dir='rtl'] .calendar-panel { transform-origin: calc(100% - 1.5rem) bottom; }
.calendar-surface { padding: 1rem; border: 1px solid #81765a8c; border-radius: .75rem; background: #2a2c25; color: var(--paper); box-shadow: 0 1rem 2.25rem #0008; max-height: calc(100dvh - var(--help-bottom) - 4rem); overflow: auto; overscroll-behavior: contain; }
.calendar-head { display: flex; align-items: center; gap: .25rem; margin-bottom: 1rem; }
.calendar-head select { min-width: 0; max-width: 47%; padding: .25rem 0; border: 0; background: #2a2c25; color: var(--paper); font-size: .8125rem; cursor: pointer; }
#calendar-month { flex: 1; }
.calendar-step { flex: none; width: 2rem; height: 2rem; padding: 0; border: 0; background: none; color: #ccb98d; font: 1.6875rem/1 var(--quote-font); cursor: pointer; }
.calendar-step:disabled, .calendar-day:disabled { opacity: .3; cursor: default; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .1875rem; }
.calendar-weekday { padding-bottom: .5rem; text-align: center; color: #a6a99b; font-size: .625rem; overflow: hidden; }
.calendar-day { min-width: 0; aspect-ratio: 1; padding: 0; border: 1px solid transparent; border-radius: 50%; background: transparent; color: #d1cdbc; font-size: .75rem; cursor: pointer; transition: background 150ms, color 150ms; }
.calendar-day:not(:disabled):hover { background: #484638; }
.calendar-day[aria-pressed='true'] { border-color: #b9a16c; color: #e2c894; }
.calendar-day[aria-current='date'] { font-weight: 600; background: #ffffff09; }
.calendar-fallback form { position: absolute; bottom: calc(100% + .75rem); inset-inline-start: 0; display: grid; gap: .75rem; width: min(20rem, calc(100vw - 2 * var(--help-edge))); }
.calendar-fallback label { font-size: .8125rem; }
.calendar-fallback input[type='date'] { min-width: 0; padding: .5rem; border: 1px solid #81765a8c; border-radius: .25rem; background: #222320; color: var(--paper); }
@media (prefers-reduced-motion: reduce) {
  .calendar-trigger, .calendar-fallback summary, .calendar-day { transition: none; }
}