.calendar-event-modal {
  position: fixed;
  inset: 0;
  margin: auto;
  box-sizing: border-box;
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: 28px;
  overflow: auto;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  background: #fff;
  color: #1e293b;
  box-shadow: 0 24px 70px rgba(15, 23, 42, .25);
}
.calendar-event-modal::backdrop { background: rgba(15, 23, 42, .32); }
.calendar-event-modal h2 { margin: 0 40px 24px 0; font-size: 1.35rem; line-height: 1.4; overflow-wrap: anywhere; }
.calendar-event-close { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 10px; background: #f1f5f9; color: #334155; font-size: 26px; cursor: pointer; }
.calendar-event-details { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 0; }
.calendar-event-details dt { margin-bottom: 6px; font-size: .85rem; font-weight: 600; color: #64748b; }
.calendar-event-details dd { margin: 0; line-height: 1.6; overflow-wrap: anywhere; }
.calendar-event-full { grid-column: 1 / -1; }
.calendar-event-description { white-space: pre-wrap; }
#calendarReportCard [data-calendar-event-id] { cursor: pointer; }
#calendarReportCard .calendar-event-trigger { padding: 0; border: 0; background: transparent; color: inherit; font: inherit; font-weight: 700; text-align: left; cursor: pointer; }
#calendarReportCard .calendar-event-trigger:hover { text-decoration: underline; }
.calendar-event-close:focus-visible, #calendarReportCard .calendar-event-trigger:focus-visible { outline: 2px solid #2563eb; outline-offset: 3px; }
@media (max-width: 480px) {
  .calendar-event-modal { padding: 22px 18px; }
  .calendar-event-details { grid-template-columns: 1fr; gap: 16px; }
}