/* 1155 – CSP-safe visible color palette. Previous inline swatch background
   styles were blocked by the existing style-src 'self' policy. Keep CSP. */
#calendar-context-menu .calendar-color-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  padding: 4px 2px;
}
#calendar-context-menu .calendar-color-chip {
  position: relative;
  width: 100%;
  min-width: 0;
  min-height: 39px;
  height: 39px;
  border-radius: 9px;
  border: 1px solid rgba(20, 48, 43, .25);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.38), 0 1px 2px rgba(0,0,0,.08);
  color: #243b36;
  font-size: 22px;
  background: #fff;
  transition: box-shadow .13s ease, transform .13s ease;
}
/* Fixed CSS colors, never an inline style: usable with the strict CSP. */
#calendar-context-menu .calendar-color-chip[data-mark-color="#5fa783"] { background: #5fa783 !important; }
#calendar-context-menu .calendar-color-chip[data-mark-color="#709fdd"] { background: #709fdd !important; }
#calendar-context-menu .calendar-color-chip[data-mark-color="#f0ba56"] { background: #f0ba56 !important; }
#calendar-context-menu .calendar-color-chip[data-mark-color="#e78cae"] { background: #e78cae !important; }
#calendar-context-menu .calendar-color-chip[data-mark-color="#b197d9"] { background: #b197d9 !important; }
#calendar-context-menu .calendar-color-chip[data-mark-color="#efa575"] { background: #efa575 !important; }
#calendar-context-menu .calendar-color-chip[data-mark-color="#77b9c4"] { background: #77b9c4 !important; }
#calendar-context-menu .calendar-color-chip[data-mark-color="#999999"] { background: #999999 !important; }
#calendar-context-menu .calendar-color-chip[data-mark-color="#c95757"] { background: #c95757 !important; }
#calendar-context-menu .calendar-color-chip[data-mark-color="#306ab0"] { background: #306ab0 !important; }
#calendar-context-menu .calendar-color-chip[data-mark-color="#769445"] { background: #769445 !important; }
#calendar-context-menu .calendar-color-chip[data-mark-color="#6e5096"] { background: #6e5096 !important; }
#calendar-context-menu .calendar-color-chip.no-color { background: #f8faf9 !important; }
#calendar-context-menu .calendar-color-chip:not(.no-color):hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.52), 0 3px 8px rgba(0,0,0,.22); }
#calendar-context-menu .calendar-color-chip[aria-pressed="true"] {
  outline: 3px solid #126e54;
  outline-offset: 2px;
  border-color: #f8fffc;
}
#calendar-context-menu .calendar-color-chip:not(.no-color)[aria-pressed="true"]::after {
  content: "✓";
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  inset: 0;
  border-radius: inherit;
  color: white;
  font-size: 19px;
  font-weight: 900;
  text-shadow: 0 1px 3px rgba(0,0,0,.65);
}
#calendar-context-menu .calendar-color-chip[data-mark-color="#f0ba56"][aria-pressed="true"]::after,
#calendar-context-menu .calendar-color-chip[data-mark-color="#efa575"][aria-pressed="true"]::after {
  color: #173c33;
  text-shadow: 0 1px 1px rgba(255,255,255,.8);
}
#calendar-context-menu .calendar-color-chip:focus-visible {
  outline: 3px solid #ad7a24;
  outline-offset: 2px;
}
/* Stored day markings receive a more visible fill, without changing their
   original saved HEX value or obscuring the course/exam labels. */
.calendar-day.has-custom-color {
  background-color: var(--day-custom-bg, #dcece4) !important;
  border-color: var(--day-custom-color, #367d63) !important;
  box-shadow: inset 0 0 0 1px var(--day-custom-color, #367d63) !important;
}
.calendar-day.has-custom-color .day-heading {
  background: rgba(255,255,255,.17);
}
@media (max-width: 400px) {
  #calendar-context-menu .calendar-color-grid { gap: 6px; }
  #calendar-context-menu .calendar-color-chip { min-height: 37px; height: 37px; }
}
@media (prefers-reduced-motion: reduce) {
  #calendar-context-menu .calendar-color-chip { transition: none; }
}