feat: click calendar day to show events detail panel

- Clicking a day highlights it and shows a panel below the calendar
- Panel lists all events for that day (recurring + one-off + brunch)
- Click same day again or X button to dismiss
- Navigating month clears selection

style.css

@@ -974,3 +974,114 @@ footer span {
     font-size: 0.72rem;
   }
 }
+
+/* ---------- Calendar Day Click ---------- */
+.cal-cell--clickable {
+  cursor: pointer;
+  transition: background 0.15s, box-shadow 0.15s;
+}
+
+.cal-cell--clickable:hover {
+  background: rgba(200, 146, 42, 0.1);
+}
+
+.cal-cell--selected {
+  background: rgba(200, 146, 42, 0.18) !important;
+  box-shadow: inset 0 0 0 2px var(--gold);
+}
+
+/* ---------- Day Detail Panel ---------- */
+.cal-day-detail {
+  background: var(--bg-card);
+  border: 1px solid var(--gold-dim);
+  border-top: 3px solid var(--gold);
+  border-radius: 4px;
+  padding: 1.5rem;
+  margin-top: 1rem;
+  animation: slideDown 0.2s ease;
+}
+
+@keyframes slideDown {
+  from { opacity: 0; transform: translateY(-8px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+.cal-detail-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1.25rem;
+}
+
+.cal-detail-title {
+  font-family: var(--font-display);
+  font-size: 1.1rem;
+  color: var(--gold);
+  letter-spacing: 0.05em;
+}
+
+.cal-detail-close {
+  background: none;
+  border: none;
+  color: var(--text-muted);
+  font-size: 1.4rem;
+  cursor: pointer;
+  line-height: 1;
+  padding: 0 4px;
+  transition: color 0.2s;
+}
+
+.cal-detail-close:hover {
+  color: var(--text);
+}
+
+.cal-detail-list {
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.cal-detail-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+}
+
+.cal-detail-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  flex-shrink: 0;
+  margin-top: 4px;
+}
+
+.cal-detail-info {
+  flex: 1;
+}
+
+.cal-detail-name {
+  font-weight: 600;
+  font-size: 0.95rem;
+  color: var(--text);
+}
+
+.cal-detail-time {
+  font-size: 0.8rem;
+  color: var(--gold);
+  margin-top: 2px;
+}
+
+.cal-detail-desc {
+  font-size: 0.8rem;
+  color: var(--text-muted);
+  margin-top: 4px;
+  line-height: 1.45;
+}
+
+.cal-detail-empty {
+  color: var(--text-muted);
+  font-size: 0.875rem;
+  text-align: center;
+  padding: 1rem 0;
+}