/* Apple Calendar day-view illustration. All chrome is decorative, not controls. */
#calendar { overflow-x: clip; }
#calendar #cal-title span { display: inline-block; }
#calendar .cal-col { min-width: 0; }
#calendar .apple-calendar {
  padding: 0; overflow: hidden; border-radius: 19px;
  border: 1px solid #d9d8dc; background: #fff;
  box-shadow: 0 28px 65px -32px #39304540, 0 2px 6px #29232e08;
  color: #242426; font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
}
#calendar .apple-cal-toolbar {
  height: 44px; padding: 0 18px; display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(#fafafa, #f5f5f6); border-bottom: 1px solid #ededee;
}
#calendar .apple-cal-window { display: flex; gap: 7px; width: 62px; }
#calendar .apple-cal-window i { width: 11px; height: 11px; border-radius: 50%; background: #ff6059; box-shadow: inset 0 0 0 1px #0000000b; }
#calendar .apple-cal-window i:nth-child(2) { background: #febc2e; }
#calendar .apple-cal-window i:nth-child(3) { background: #28c840; }
#calendar .apple-cal-views { display: flex; padding: 3px; gap: 2px; border-radius: 8px; background: #eaeaec; font-size: 12px; }
#calendar .apple-cal-views span { padding: 3px 14px; line-height: 19px; }
#calendar .apple-cal-views .selected { background: #fff; border-radius: 5px; box-shadow: 0 1px 3px #0002; }
#calendar .apple-cal-add { width: 62px; text-align: right; font-size: 25px; font-weight: 300; color: #777; }
#calendar .cal-head { padding: 14px 22px; line-height: 1.2; display: flex; align-items: center; color: #252528; }
#calendar .cal-head b { font-size: 26px; font-weight: 650; letter-spacing: -.8px; color: #252528; }
#calendar .apple-cal-year { margin-left: 7px; font-size: 22px; font-weight: 300; }
#calendar .apple-cal-weekday { display: block; margin-top: 5px; font-size: 13px; color: #737378; }
#calendar .apple-cal-today { display: flex; align-items: center; gap: 10px; color: #8b8b90; font-size: 22px; }
#calendar .apple-cal-today em { font-size: 12px; font-style: normal; color: #4c4c50; padding: 3px 10px; border: 1px solid #e2e2e5; border-radius: 5px; }
#calendar .apple-cal-all-day { display: flex; align-items: center; height: 38px; border-block: 1px solid #ececef; background: #fdfdfd; }
#calendar .apple-cal-all-day > span { width: 54px; text-align: right; padding-right: 10px; font-size: 10px; color: #929299; }
#calendar .apple-cal-scroll { height: clamp(390px, calc(100svh - 430px), 480px); overflow-y: auto; }
#calendar .apple-cal-scroll:focus-visible { outline: 2px solid #8063cb; outline-offset: -2px; }
#calendar .cal-body { display: grid; grid-template-columns: 54px minmax(0, 1fr); column-gap: 0; height: 960px; margin: 14px 12px 14px 0; }
#calendar .cal-hours span { font-family: inherit; font-size: 10px; right: 8px; width: calc(100% - 14px); line-height: 12px; text-align: right; color: #939398; }
#calendar .cal-grid { border-left: 0; }
#calendar .cal-grid hr { border-top: 1px solid #ededf0; }
#calendar .event { border-radius: 4px; padding: 1px 6px; line-height: 13px; min-height: 0; border-left-width: 3px; box-shadow: none; font-size: 12px; }
#calendar .event strong { display: block; font-weight: 600; font-size: inherit; white-space: nowrap; }
#calendar .event small { display: block; margin: 0; font-family: inherit; font-size: 10px; line-height: 11px; color: inherit; opacity: .8; }
#calendar .event.mine { left: 3px; right: calc(50% + 4px); color: #315b90; background: #e8f1fe; border-left-color: #74a3eb; }
#calendar .event.zoomie { left: calc(50% + 4px); right: 0; width: auto; color: #554581; background: #ece8f7; border-left-color: #8063cb; }
#calendar .event.short { display: flex; gap: 7px; align-items: center; padding-block: 0; min-height: 17px; }
#calendar .event.short small { margin: 0; font-size: 10px; white-space: nowrap; }
#calendar .apple-cal-footer { display: flex; justify-content: center; gap: 18px; padding: 8px; line-height: 14px; border-top: 1px solid #ececef; background: #fafafa; font-size: 10px; color: #77777d; }
#calendar .apple-cal-footer span { display: flex; align-items: center; gap: 5px; }
#calendar .apple-cal-footer i { width: 7px; height: 7px; border-radius: 50%; background: #8063cb; }
#calendar .apple-cal-footer .schedule-legend i { background: #74a3eb; }
#calendar .apple-cal-caption { display: flex; justify-content: center; align-items: center; gap: 9px; margin-top: 12px; font-size: 13px; font-weight: 500; color: #59545e; }
#calendar .apple-cal-caption small { font-size: 11px; font-weight: 400; color: #96909b; }
#calendar .apple-cal-icon { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 29px; height: 30px; border: 1px solid #e9e7ea; border-radius: 7px; background: #fff; line-height: 1; font-size: 18px; font-weight: 400; color: #222; }
#calendar .apple-cal-icon small { color: #ed5b56; font-size: 7px; margin-bottom: 2px; }
#calendar .cal-note { padding: 0; margin-top: 8px; text-align: center; font-size: 11px; line-height: 1.5; color: #8c8593; }
@media (max-width: 900px) {
  #calendar .wrap { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  #calendar .cal-col { width: 100%; max-width: 580px; margin-inline: auto; }
  #calendar .apple-cal-scroll { height: 440px; }
}
@media (max-width: 450px) {
  #calendar .apple-cal-toolbar { padding-inline: 12px; }
  #calendar .apple-cal-window { width: 44px; gap: 5px; }
  #calendar .apple-cal-window i { width: 9px; height: 9px; }
  #calendar .apple-cal-add { width: 30px; }
  #calendar .apple-cal-views span { padding-inline: 12px; }
  #calendar .cal-head { padding: 16px; }
  #calendar .cal-head b { font-size: 24px; }
  #calendar .apple-cal-year { font-size: 18px; }
  #calendar .apple-cal-today { gap: 6px; }
  #calendar .cal-body { grid-template-columns: 42px minmax(0, 1fr); margin-right: 8px; }
  #calendar .apple-cal-all-day > span { width: 42px; }
  #calendar .apple-cal-footer { gap: 10px; font-size: 9px; }
}

/* Enhancement only: without the motion script, every event remains visible. */
@media (prefers-reduced-motion: no-preference) {
  #calendar[data-calendar-motion="ready"] .event.mine,
  #calendar .event.mine[data-pending] { opacity: 0; }
}

#calendar .calendar-inbox { flex: 1; min-width: 0; padding-inline: 3px 10px; }
#calendar .calendar-pending-chip { display: block; width: min(150px, 100%); height: 24px; padding: 4px 8px; border-radius: 4px; border-left: 3px solid #74a3eb; color: #315b90; background: #e8f1fe; font-size: 12px; line-height: 16px; }
#calendar .calendar-drag-layer { position: absolute; inset: 0; z-index: 3; overflow: hidden; pointer-events: none; }
#calendar .calendar-drag-card { position: absolute; padding: 4px 8px; border-radius: 4px; border-left: 3px solid #74a3eb; background: #e8f1fe; color: #315b90; font-size: 12px; line-height: 16px; box-shadow: 0 8px 20px #315b9026; transform-origin: top left; }
#calendar .calendar-drag-card::after { content: ''; position: absolute; top: 13px; right: 10px; width: 12px; height: 16px; background: #315b90; clip-path: polygon(0 0, 100% 63%, 57% 65%, 75% 100%, 54% 100%, 36% 69%, 0 100%); filter: drop-shadow(0 1px 1px #fff); }