feat(calendar): add calendar.css grid layout + styled day cells and legend

- Create calendar.css with 7-column grid using display: grid
- Style calendar header with navigation buttons (min 36x36px tap targets)
- Style day cells with borders, hover states, and focus-visible outlines
- Style weekday headers (centered, muted, uppercase)
- Create --disabled modifier for leading/trailing days from adjacent months
- Create --has-events modifier for visual emphasis
- Create event markers as small dots (8x8px circles)
- Style legend with compact horizontal swatch layout
- Import CSS into Calendar.tsx following co-located pattern from Header

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>

frontend/src/pages/calendar.css

@@ -0,0 +1,164 @@
+.calendar {
+  max-width: 920px;
+  margin: 0 auto;
+  padding: 16px;
+}
+
+.calendar__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 24px;
+}
+
+.calendar__header button {
+  min-width: 36px;
+  min-height: 36px;
+  padding: 8px 12px;
+  background: none;
+  border: 1px solid #d0d0d0;
+  border-radius: 4px;
+  font-size: 18px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.calendar__header button:hover {
+  background-color: #f0f0f0;
+}
+
+.calendar__header h2 {
+  margin: 0;
+  font-size: 20px;
+  font-weight: 600;
+  color: #333;
+}
+
+.calendar__grid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 8px;
+  margin-bottom: 24px;
+}
+
+.calendar__weekday {
+  padding: 12px 8px;
+  text-align: center;
+  font-weight: 600;
+  font-size: 13px;
+  color: #666;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.calendar-day {
+  min-height: 84px;
+  padding: 8px;
+  border: 1px solid #e0e0e0;
+  border-radius: 4px;
+  background-color: #fff;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  transition: all 0.2s;
+  position: relative;
+}
+
+.calendar-day:hover {
+  border-color: #0066cc;
+  box-shadow: 0 2px 8px rgba(0, 102, 204, 0.1);
+  background-color: #f9fbff;
+}
+
+.calendar-day:focus-visible {
+  outline: 2px solid #0066cc;
+  outline-offset: 2px;
+}
+
+.calendar-day--disabled {
+  background-color: #fafafa;
+  color: #999;
+  cursor: default;
+}
+
+.calendar-day--disabled:hover {
+  border-color: #e0e0e0;
+  box-shadow: none;
+  background-color: #fafafa;
+}
+
+.calendar-day--has-events {
+  background-color: #fafbff;
+}
+
+.calendar-day__number {
+  font-weight: 600;
+  font-size: 14px;
+  color: #333;
+  margin-bottom: 4px;
+}
+
+.calendar-day--disabled .calendar-day__number {
+  color: #bbb;
+}
+
+.calendar-day--today .calendar-day__number {
+  background-color: #0066cc;
+  color: #fff;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+}
+
+.calendar-day__events {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  margin-top: auto;
+}
+
+.calendar-day__event {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.calendar__legend {
+  padding: 16px;
+  background-color: #f9f9f9;
+  border: 1px solid #e0e0e0;
+  border-radius: 4px;
+}
+
+.calendar__legend h3 {
+  margin: 0 0 12px 0;
+  font-size: 14px;
+  font-weight: 600;
+  color: #333;
+}
+
+.calendar__legend-items {
+  display: flex;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+
+.calendar__legend-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  color: #666;
+}
+
+.calendar__legend-item .calendar-event {
+  width: 12px !important;
+  height: 12px !important;
+  min-width: 12px;
+  flex-shrink: 0;
+}