:root { color-scheme: light dark; font-family: system-ui, sans-serif; line-height: 1.5; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0 auto; max-width: 90rem; overflow-wrap: anywhere; padding: 1rem; }
header { margin-bottom: 2rem; }
form { display: grid; gap: .75rem; max-width: 44rem; }
[data-response-form] { max-width: none; }
input[type="text"], input[type="date"], input:not([type]), #share-url { box-sizing: border-box; font: inherit; padding: .65rem; width: 100%; }
button { font: inherit; padding: .65rem 1rem; width: fit-content; }
fieldset { border: 1px solid currentColor; }
.inline-option { display: inline-flex; gap: .35rem; margin: .25rem .75rem .25rem 0; }
.calendar-fieldset { max-width: 86rem; padding: 1rem; }
.calendar-picker { background: color-mix(in srgb, Canvas 96%, CanvasText 4%); border: 1px solid color-mix(in srgb, CanvasText 25%, transparent); border-radius: .8rem; display: grid; grid-template-columns: minmax(11rem, 15rem) minmax(0, 1fr); min-height: 34rem; overflow: hidden; }
.month-navigation { border-right: 1px solid color-mix(in srgb, CanvasText 20%, transparent); padding: 1.25rem; }
.month-navigation-label { font-size: .8rem; letter-spacing: .08em; margin: 0 0 .75rem; text-transform: uppercase; }
.month-navigation-controls { align-items: center; display: grid; gap: .35rem; grid-template-columns: auto 1fr auto; }
.month-navigation-controls p { margin: 0; text-align: center; }
.month-navigation-controls strong, .month-navigation-controls span { display: block; }
.month-navigation-controls span { color: color-mix(in srgb, CanvasText 65%, transparent); font-size: .9rem; }
.month-arrow { border: 1px solid color-mix(in srgb, CanvasText 30%, transparent); border-radius: 50%; font-size: 1.5rem; height: 2.5rem; line-height: 1; padding: 0; width: 2.5rem; }
.month-arrow:disabled { opacity: .3; }
.month-list { display: grid; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.calendar-months { min-width: 0; }
.month-group { margin: 0; padding: 1.25rem; }
.month-group + .month-group { border-top: 1px solid color-mix(in srgb, CanvasText 20%, transparent); }
.month-group h3 { font-size: 1.5rem; margin: 0 0 1rem; }
.weekday-row, .date-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.weekday-row span { font-size: .75rem; font-weight: 700; padding: .5rem; text-align: center; text-transform: uppercase; }
.date-grid { border-left: 1px solid color-mix(in srgb, CanvasText 20%, transparent); border-top: 1px solid color-mix(in srgb, CanvasText 20%, transparent); }
.date-option, .empty-day, .outside-range { border-bottom: 1px solid color-mix(in srgb, CanvasText 20%, transparent); border-right: 1px solid color-mix(in srgb, CanvasText 20%, transparent); min-height: 7rem; }
.empty-day, .outside-range { background: color-mix(in srgb, Canvas 92%, CanvasText 8%); display: block; }
.outside-range { color: color-mix(in srgb, CanvasText 42%, transparent); padding: .55rem; }
.date-option { cursor: pointer; display: block; padding: .55rem; position: relative; }
.date-option input { height: 1px; opacity: 0; position: absolute; width: 1px; }
.date-option:has(input:focus-visible) { outline: .2rem solid #1677ff; outline-offset: -.2rem; z-index: 1; }
.day-number { align-items: center; border-radius: 50%; display: flex; font-weight: 700; height: 2rem; justify-content: center; width: 2rem; }
.selection-label { display: block; font-size: .78rem; font-weight: 700; margin-top: .6rem; opacity: 0; }
.date-option:has(input:checked) { background: color-mix(in srgb, #b00020 16%, Canvas); }
.date-option:has(input:checked) .day-number { background: #b00020; color: white; }
.date-option:has(input:checked) .selection-label { opacity: 1; }
.sr-only { clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }
.bulk-controls, .share-controls { align-items: center; display: flex; flex-wrap: wrap; gap: .5rem; }
.share-controls input { flex: 1 1 18rem; min-width: 0; }
.results { display: grid; gap: .5rem; padding-left: 1.5rem; }
.error { border-left: .3rem solid #b00020; padding-left: .75rem; }
.success { border-left: .3rem solid #087830; padding-left: .75rem; }
.status:empty { display: none; }
.skip-link { background: Canvas; left: .5rem; padding: .5rem; position: absolute; top: -5rem; z-index: 1; }
.skip-link:focus { top: .5rem; }
:focus-visible { outline: .2rem solid #1677ff; outline-offset: .15rem; }
@media (max-width: 48rem) { .calendar-picker { grid-template-columns: 1fr; min-height: 0; } .month-navigation { border-bottom: 1px solid color-mix(in srgb, CanvasText 20%, transparent); border-right: 0; } .date-option, .empty-day, .outside-range { min-height: 4.75rem; } }
@media (max-width: 30rem) { body { padding: .75rem; } fieldset { margin: 0; min-width: 0; padding: .65rem; } button:not(.month-arrow) { width: 100%; } .month-group { padding: .5rem; } .weekday-row span { font-size: .65rem; overflow: hidden; padding: .35rem .1rem; } .date-option, .empty-day, .outside-range { min-height: 4rem; } .date-option, .outside-range { padding: .25rem; } .selection-label { font-size: .6rem; overflow: hidden; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; } }