/* Narrowing the calendar to a kind is what a timetable is, so the filter sits
   above the grid rather than inside a menu. (#341) */
.calendar-kinds {
  display: flex;
  /* Pico spaces the children of a <nav> to the edges, which pushed these three
     to the two ends of the page. They are a set, so they sit together. */
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: var(--toddyi-size-0-5rem);
  margin-bottom: var(--toddyi-size-0-75rem);
}

/* Which one task the calendar is looking at, and the way back out of it. */
.calendar-focus {
  display: flex;
  align-items: center;
  gap: var(--toddyi-size-0-75rem);
  flex-wrap: wrap;
  margin-bottom: var(--toddyi-size-0-5rem);
  color: var(--pico-muted-color);
}

.calendar-kind {
  /* Pico stretches a link styled as a button to the full width it is given, so
     three of them in a flex row spread out across the page instead of sitting
     together. They are a set of choices, not a toolbar. */
  flex: 0 0 auto;
  width: auto;
  padding: var(--toddyi-size-0-3rem) var(--toddyi-size-0-9rem);
  font-size: var(--toddyi-size-0-88rem);
  white-space: nowrap;
}

/* ===== Calendar ===== */
.calendar-wrap {
  padding: var(--toddyi-size-1rem);
  box-shadow: var(--toddyi-card-shadow);
  background: var(--pico-card-background-color);
  border: var(--toddyi-size-1px) solid var(--pico-muted-border-color);
  border-radius: var(--pico-border-radius);
}
/* Connect FullCalendar v6 theme variables to the application brand variables. */
.fc {
  font-size: var(--toddyi-size-0-9rem);
  --fc-border-color: var(--pico-muted-border-color);
  --fc-page-bg-color: transparent;
  --fc-neutral-bg-color: var(--pico-secondary-background);
  --fc-today-bg-color: var(--pico-primary-focus);
  --fc-button-text-color: var(--pico-primary-inverse);
  --fc-button-bg-color: var(--pico-primary);
  --fc-button-border-color: var(--pico-primary);
  --fc-button-hover-bg-color: var(--pico-primary-hover);
  --fc-button-hover-border-color: var(--pico-primary-hover);
  --fc-button-active-bg-color: var(--pico-primary-hover);
  --fc-button-active-border-color: var(--pico-primary-hover);
}
/* FullCalendar builds the month grid out of real <table>, <th> and <td>
   elements, so the unscoped table rules in components/typography.css and
   components/content.css land on every one of them. The visible damage was an
   empty 1rem band between the weekday header and the first week — that is the
   `margin-bottom` typography.css puts on every <table>, applied to the column
   header table — plus Pico cell padding inside each day cell and an opaque
   cell background that defeated the `--fc-page-bg-color: transparent` set
   above, so the card no longer showed through the grid. FullCalendar draws its
   own borders and spacing; it only needs the baseline left alone. Scoped to
   .fc, and low enough in specificity that the list view keeps the padding its
   own `.fc .fc-list-table td` rule sets. (#285) */
.fc table { margin-bottom: 0; }
.fc th,
.fc td { padding: 0; background-color: transparent; }

.fc .fc-toolbar-title { font-size: var(--toddyi-size-1-25rem); font-weight: 700; color: var(--pico-color); }
.fc .fc-col-header-cell-cushion,
.fc .fc-daygrid-day-number { color: var(--pico-color); text-decoration: none; }
.fc .fc-day-other .fc-daygrid-day-number { color: var(--pico-muted-color); }
.fc .fc-event { border: none; border-radius: var(--toddyi-size-0-35rem); padding: var(--toddyi-size-1px) var(--toddyi-size-4px); font-weight: 600; }