/* The theme gives these elements a display value, which outranks the
   user-agent rule for [hidden]. */
.agenda[hidden],
.agenda [hidden],
.schedule[hidden] {
  display: none;
}

/* Wraps so a narrow column puts the view toggle under the heading
   instead of overflowing. */
.schedule-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  column-gap: 1rem;
}

.agenda-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin: 0 0 0.5rem;
}

.agenda-calendar {
  --agenda-columns: 7;
  --agenda-gutter: 2rem;
}
.agenda-calendar[data-columns="5"] {
  --agenda-columns: 5;
}

/* Equal outer columns centre the title on the bar's full width, over the
   grid, whatever the width of the nav group beside it. */
.agenda-month-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 0.5rem;
  margin: 0 0 0.5rem;
}
.agenda-month {
  grid-column: 2;
  margin: 0;
  text-align: center;
}
.agenda-nav-group {
  grid-column: 3;
  justify-self: end;
  display: flex;
  gap: 0.25rem;
}

.agenda-weekdays,
.agenda-row {
  display: grid;
  grid-template-columns: var(--agenda-gutter) repeat(var(--agenda-columns), minmax(0, 1fr));
}

.agenda-row {
  position: relative;
}

/* A word on its side reads as a row label, never as a date, and needs no
   more gutter width than a numeral. */
.agenda-week {
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
}

.agenda-day {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  min-height: 5.5rem;
  padding: 0.2rem;
}

.agenda-day-number {
  align-self: flex-end;
}

.agenda-chip {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.agenda-break-label {
  position: absolute;
  left: var(--agenda-gutter);
  right: 0;
  bottom: 0.4rem;
  text-align: center;
  pointer-events: none;
}