.clr-calendar { --clr-accent: #2271b1; --clr-today: #d63638; width: 100%; max-width: 980px; margin: 1.5rem 0; color: #1d2327; font-family: inherit; }
.clr-calendar * { box-sizing: border-box; }
.clr-calendar__header { margin: 0 0 1.1rem; }
.clr-calendar__header h2 { margin: 0; font-size: clamp(1.75rem, 4vw, 2.8rem); line-height: 1.1; }
.clr-calendar__header p { margin: .4rem 0 0; color: #50575e; }
.clr-calendar__layout { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(150px, 220px); gap: 22px; align-items: start; }
.clr-calendar__main { min-width: 0; }
.clr-calendar--legend-top .clr-calendar__layout,
.clr-calendar--legend-bottom .clr-calendar__layout { grid-template-columns: 1fr; }
.clr-calendar--legend-top .clr-legend { order: -1; }
.clr-calendar__nav { display: grid; grid-template-columns: 36px minmax(0, 1fr) 36px; gap: 5px; margin: 0 0 8px; padding: 8px; background: #f6f7f7; }
.clr-calendar__nav button,
.clr-calendar__nav select { min-width: 0; min-height: 36px; margin: 0; border: 1px solid #c3c4c7; border-radius: 0; background: #fff; color: #2c3338; font: inherit; line-height: 1.2; }
.clr-calendar__nav button { display: grid; place-items: center; padding: 0; background: #c3cbd1; color: #fff; cursor: pointer; }
.clr-calendar__nav button:hover,
.clr-calendar__nav button:focus-visible { border-color: var(--clr-accent); background: var(--clr-accent); outline: 2px solid color-mix(in srgb, var(--clr-accent), transparent 65%); outline-offset: 1px; }
.clr-calendar__nav button:disabled { cursor: wait; opacity: .55; }
.clr-calendar__nav select { width: 100%; padding: 4px 30px 4px 10px; }
.clr-calendar__nav strong { display: grid; place-items: center; min-height: 36px; background: #fff; font-size: .95rem; }
.clr-months { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 18px; }
.clr-month { min-width: 0; padding: 0; background: #fff; }
.clr-month h3 { margin: 0 0 8px; padding: 7px; background: #f6f7f7; text-align: center; font-size: 1rem; }
.clr-grid { display: grid; grid-template-columns: repeat(var(--clr-columns), minmax(0, 1fr)); gap: 2px; }
.clr-day-heading,
.clr-week-heading,
.clr-week-number { display: grid; place-items: center; min-height: 34px; padding: .25rem .1rem; text-align: center; font-size: .72rem; font-weight: 700; color: #2c3338; }
.clr-day-heading abbr { text-decoration: none; }
.clr-week-number { background: #f0f0f1; color: #646970; }
.clr-day { position: relative; min-width: 0; min-height: 50px; padding: .35rem; border: 1px solid #fff; border-radius: 0; background: var(--clr-day-bg, #f6f7f7); color: var(--clr-day-text, inherit); overflow: visible; }
.clr-day[tabindex="0"] { cursor: help; }
.clr-day[tabindex="0"]:focus-visible { z-index: 4; outline: 3px solid var(--clr-accent); outline-offset: 1px; }
.clr-day--empty,
.clr-day--hidden { background: #f6f7f7; }
.clr-day--past { cursor: default; }
.clr-day--today { box-shadow: inset 0 0 0 2px var(--clr-today); }
.clr-day__number { display: block; text-align: center; font-size: .82rem; font-weight: 500; }
.clr-day__text { display: block; margin-top: .2rem; font-size: .65rem; line-height: 1.2; overflow-wrap: anywhere; }
.clr-tooltip { position: absolute; left: 50%; bottom: calc(100% + 7px); z-index: 10; width: max-content; max-width: 220px; padding: .5rem .65rem; border-radius: .2rem; background: #1d2327; color: #fff; font-size: .78rem; line-height: 1.35; transform: translateX(-50%); opacity: 0; visibility: hidden; pointer-events: none; box-shadow: 0 3px 12px rgba(0,0,0,.25); }
.clr-tooltip::after { position: absolute; top: 100%; left: 50%; border: 5px solid transparent; border-top-color: #1d2327; content: ""; transform: translateX(-50%); }
.clr-day:hover .clr-tooltip,
.clr-day:focus .clr-tooltip,
.clr-day--tip-open .clr-tooltip { opacity: 1; visibility: visible; }
.clr-legend { padding: 10px; border: 1px solid #e2e4e7; background: #fff; }
.clr-legend > strong { display: block; margin-bottom: 8px; }
.clr-legend ul { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.clr-legend li { display: flex; align-items: center; gap: 7px; margin: 0; font-size: .9rem; }
.clr-legend li span { flex: 0 0 auto; width: 25px; height: 25px; border: 1px solid rgba(0,0,0,.06); background: var(--clr-status-bg); color: var(--clr-status-text); }
.clr-calendar--legend-top .clr-legend ul,
.clr-calendar--legend-bottom .clr-legend ul { flex-flow: row wrap; }

@media (max-width: 640px) {
	.clr-calendar__layout { grid-template-columns: 1fr; }
	.clr-calendar .clr-legend { order: 2; }
	.clr-calendar__header h2 { font-size: 1.8rem; }
	.clr-day { min-height: 42px; padding: .25rem; }
	.clr-day__text { font-size: .58rem; }
	.clr-day-heading,
	.clr-week-heading,
	.clr-week-number { min-height: 28px; font-size: .62rem; }
	.clr-legend ul { flex-flow: row wrap; }
}
@media (prefers-reduced-motion: reduce) {
	.clr-calendar * { scroll-behavior: auto !important; transition: none !important; }
}