/* Shared by the private calendar and the public fictional example. */
.month-navigation { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; border-top: 1px solid var(--line); }
.month-navigation > :nth-child(3) { justify-self: end; }
.month-navigation > span { font-size: 12px; }
.calendar-workspace { width: min(100% - 64px, 960px); }
.month-navigation { padding: 25px 4px; }
.month-navigation h2 { font-size: 23px; }
.calendar-grid { width: 100%; table-layout: fixed; border-spacing: 0; border-collapse: collapse; }
.calendar-grid th { height: 38px; color: var(--muted); font-size: 12px; font-weight: 600; }
.calendar-grid th:first-child { color: var(--accent); }
.calendar-grid th:last-child { color: #376d90; }
.calendar-cell { padding: 0; border: 1px solid var(--line); vertical-align: top; background: #fffdf9; }
/* Every day cell has the same fixed height, so a long thread title never stretches a week row:
   the title stops at two lines ending in "…" and is the only part allowed to give up space. */
.calendar-day { display: flex; flex-direction: column; gap: 7px; height: 139px; padding: 10px 12px; text-decoration: none; color: var(--ink); }
a.calendar-day { transition: background .15s; }
a.calendar-day:hover { background: #fff0df; }
a.calendar-day:focus-visible { outline-offset: -4px; }
.calendar-day-number { align-self: flex-start; min-width: 26px; height: 26px; text-align: center; line-height: 26px; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.is-today { box-shadow: inset 0 0 0 2px #d56882; }
.is-today .calendar-day-number { background: var(--accent); color: #fff; border-radius: 50%; }
.has-entry { background: #fff6dd; }
.calendar-day-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 2px 4px; }
.calendar-ai-mark { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; padding: 0 5px; border-radius: 6px; background: #efe6f6; color: #6f4f8a; font-size: 10px; font-weight: 700; line-height: 1.6; white-space: nowrap; }
.calendar-thread-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; font-size: 12px; font-weight: 700; line-height: 1.5; }
.calendar-marks { display: flex; align-items: center; gap: 4px; margin-top: auto; }
.entry-mark { color: #b0894a; font-size: 12px; line-height: 1.8; }
.message-count { color: #72517e; background: #f2e7f6; border-radius: 7px; padding: 0 6px; font-size: 11px; line-height: 1.8; white-space: nowrap; font-variant-numeric: tabular-nums; }
.message-count.count-mid { color: #6b3f78; background: #e7d3ef; }
.message-count.count-high { color: #fff; background: #a05aa8; }
.calendar-add { align-self: center; padding-top: 12px; color: #c6a6aa; font-size: 20px; }
.other-month { background: #f3efec; }
.other-month .calendar-day { color: #a69ba5; }
.is-future { background: #f7f3f0; }
.is-future .calendar-day-number { color: #b6aeb6; }
.calendar-legend { padding: 20px 3px 0; font-size: 12px; color: var(--muted); }


@media (max-width: 560px) {
  .month-navigation { gap: 5px; }
  .month-navigation a, .month-navigation > span { font-size: 10px; }
  .calendar-workspace { width: calc(100% - 24px); }
  .month-navigation h2 { font-size: 20px; }
  .calendar-day { height: 126px; padding: 5px 3px; gap: 5px; }
  .calendar-day-number { font-size: 11px; min-width: 23px; height: 23px; line-height: 23px; }
  .calendar-ai-mark { padding: 0 3px; border-radius: 5px; font-size: 9px; }
  .calendar-thread-title { font-size: 10px; }
  .message-count { font-size: 10px; padding: 0 3px; }
  .entry-mark { font-size: 11px; }
  .calendar-legend { font-size: 10px; }
  .calendar-add { font-size: 17px; }
}