/* Mini calendar widget: month nav, the day grid with today/muted/due/event states, and
   the event list shown inside the day-detail modal. */

.cal-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--ink-muted);
}
.cal-nav-btn {
  background: none;
  border: none;
  color: var(--ink);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 2px 4px;
}
.cal-nav-btn:hover { color: var(--accent); }
.cal-month-label { min-width: 84px; text-align: center; }

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  font-family: var(--font-mono);
  max-width: 320px;
  margin: 0 auto;
}
.cal-dow {
  font-size: 0.6rem;
  text-align: center;
  color: var(--ink-muted);
  text-transform: uppercase;
  padding-bottom: 4px;
}
.cal-day {
  position: relative;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: 0.74rem;
  font-family: inherit;
  border-radius: 50%;
  border: none;
  background: none;
  color: var(--ink);
  padding: 0;
  cursor: pointer;
}
.cal-day:hover { background: var(--accent-soft); }
.cal-day.is-muted { color: var(--ink-muted); opacity: 0.45; }
.cal-day.is-today { background: var(--accent); color: var(--on-accent); font-weight: 600; }
.cal-day.is-today:hover { background: var(--accent-strong); }
.cal-dots { display: flex; gap: 3px; height: 4px; }
.cal-dot { width: 4px; height: 4px; border-radius: 50%; }
.cal-dot-due { background: var(--warn); }
.cal-dot-event { background: var(--accent); }
.cal-day.is-today .cal-dot-due,
.cal-day.is-today .cal-dot-event { background: var(--on-accent); }

.day-events-list { margin-top: 12px; }
.day-event-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 2px;
  border-bottom: 1px solid var(--line);
  font-size: 0.85rem;
}
.day-event-item:last-child { border-bottom: none; }