/*
  Mini-calendar widget. One or more <li> months inside <ol class="calendar">.
  Each month has a <h2> label and a nested <ol> of day cells.
  Days-with-events render as <label for="d-YYYY-MM-DD"> hooked up to a
  hidden radio; days without events are <span>.
*/

.calendar {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-ui);
}
.calendar > li + li { margin-block-start: var(--space-md); }
.calendar h2 {
  font-size: .75rem;
  font-weight: 700;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-block-end: var(--space-2xs);
}
.calendar ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  font-size: .7rem;
}
.calendar ol > li {
  min-block-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-faint);
}
.calendar ol > li.weekday {
  color: var(--ink-faint);
  font-size: .6rem;
  min-block-size: 1rem;
}
.calendar label {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 100%;
  block-size: 100%;
  border-radius: var(--radius-sm);
  color: var(--brand);
  font-weight: 700;
  cursor: pointer;
  background: color-mix(in oklch, var(--brand) 12%, transparent);
}
.calendar label:hover { background: var(--brand); color: white; }

/* Hidden radio inputs that drive day selection.
   Kept focusable (1px, opacity 0) so Tab + arrow keys still work. */
.day-input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}