@layer modules {
  .month-calendar {
    display: none;
    flex: 1;
    flex-direction: column;

    @media (min-width: 64rem) { display: flex; }
  }

  .month-calendar__weekdays {
    display: grid;
    flex: none;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    border-bottom: 1px solid var(--color-border);
    border-start-start-radius: var(--radius-xl);
    border-start-end-radius: var(--radius-xl);
    background-image: var(--gradient-header);
  }

  .month-calendar__weekday {
    padding: 0.625rem 0.75rem;
    font-size: var(--text-2xs);
    line-height: 1rem;
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--color-text-muted);
  }

  .month-calendar__grid {
    display: grid;
    flex: 1;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    grid-auto-rows: minmax(8rem, 1fr);
  }

  .month-calendar__day {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
    padding: 0.375rem 0.375rem 0.5rem;
    border-bottom: 1px solid var(--color-border);
    transition: background-color 0.15s var(--ease-out), box-shadow 0.15s var(--ease-out);

    &:not(:nth-child(7n + 1)) { border-left: 1px solid var(--color-border); }
    &:nth-last-child(-n + 7) { border-bottom: 0; }
    &:nth-last-child(7) { border-end-start-radius: var(--radius-xl); }
    &:last-child { border-end-end-radius: var(--radius-xl); }
  }

  .month-calendar__day:has(.month-calendar__event-link:hover) {
    z-index: 1;
  }

  .month-calendar__day--weekend {
    background-color: var(--color-surface-muted);
  }

  .month-calendar__day--outside {
    background: var(--stripes-faint);

    .month-calendar__date { color: var(--color-gray-300); }
  }

  .month-calendar__day--drop-target {
    background-color: var(--color-blue-50);
    box-shadow: inset 0 0 0 2px var(--color-blue-300);
  }

  .month-calendar__day-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .month-calendar__date {
    display: grid;
    place-items: center;
    min-width: 1.75rem;
    height: 1.75rem;
    padding-inline: 0.25rem;
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
    font-variant-numeric: tabular-nums;
    color: var(--color-text);
  }

  .month-calendar__day--past .month-calendar__date {
    color: var(--color-gray-400);
  }

  .month-calendar__day--today .month-calendar__date {
    background-image: var(--gradient-accent);
    color: var(--color-white);
    box-shadow: var(--bevel-accent);
  }

  .month-calendar__add {
    display: grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    opacity: 0;
    scale: 0.8;
    transition: opacity 0.15s var(--ease-out), scale 0.15s var(--ease-out), background-color 0.15s var(--ease-out);

    .month-calendar__day:hover &,
    &:focus-visible {
      opacity: 1;
      scale: 1;
    }

    &:hover {
      background-color: var(--color-blue-50);
      color: var(--color-blue-700);
    }
  }

  .month-calendar__events {
    display: flex;
    flex-direction: column;
    gap: 0.1875rem;
  }

  .month-calendar__event {
    position: relative;
    animation: calendar-event-in 0.35s var(--ease-out) backwards;
    animation-delay: calc(var(--event-index, 0) * 30ms);
  }

  .month-calendar__event.calendar-event--cancelled .month-calendar__event-name {
    text-decoration-line: line-through;
  }

  .month-calendar__event-link {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    min-width: 0;
    padding: 0.125rem 0.375rem;
    border-radius: var(--radius-md);
    font-size: var(--text-xs);
    line-height: 1rem;
    transition: box-shadow 0.15s var(--ease-out), translate 0.15s var(--ease-out);

    &[draggable="true"] { cursor: grab; }
  }

  .month-calendar__event-time {
    flex: none;
    font-variant-numeric: tabular-nums;
    color: var(--event-meta);
  }

  .month-calendar__event-name {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
    overflow: hidden;
  }

  .month-calendar__tooltip {
    position: absolute;
    bottom: calc(100% + 0.375rem);
    left: 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    width: max-content;
    max-width: 16rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-lg);
    background-color: var(--color-gray-900);
    box-shadow: var(--shadow-lg);
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    color: var(--color-white);
    text-shadow: none;
    visibility: hidden;
    opacity: 0;
    translate: 0 0.25rem;
    pointer-events: none;
    transition: opacity 0.15s var(--ease-out), translate 0.15s var(--ease-out), visibility 0.15s;

    .month-calendar__event-link:hover &,
    .month-calendar__event-link:focus-visible & {
      visibility: visible;
      opacity: 1;
      translate: 0;
      transition-delay: 0.35s;
    }

    .month-calendar__event-link:active & { visibility: hidden; }

    .month-calendar__day:nth-child(7n) &,
    .month-calendar__day:nth-child(7n - 1) & {
      left: auto;
      right: 0;
    }
  }

  .month-calendar__tooltip-sub {
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    color: var(--color-gray-300);
  }

  .month-calendar__tooltip-sub--conflict {
    color: var(--color-amber-200);
  }

  .month-calendar__time-off {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
    padding: 0.125rem 0.375rem;
    border-radius: var(--radius-md);
    background: var(--stripes);
    box-shadow: inset 0 0 0 1px var(--color-gray-200);
    font-size: var(--text-xs);
    line-height: 1rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-600);
    white-space: nowrap;
    overflow: hidden;

    .icon { flex: none; }
  }

  /* Mobile: month picker and the picked day's agenda */

  .month-agenda {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    width: 100%;
    margin-top: 1rem;

    @media (min-width: 64rem) { display: none; }
  }

  .month-picker {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    row-gap: 0.25rem;
    padding: 0.5rem;
  }

  .month-picker__weekday {
    padding-block: 0.25rem;
    text-align: center;
    font-size: var(--text-2xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-muted);
  }

  .month-picker__day {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.125rem;
    padding-block: 0.375rem 0.3125rem;
    border-radius: var(--radius-lg);
    color: var(--color-text);
    transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out), scale 0.15s var(--ease-out);

    &:active { scale: 0.92; }

    &[aria-current] {
      background-image: var(--gradient-accent);
      color: var(--color-white);
      box-shadow: var(--bevel-accent);
    }
  }

  .month-picker__day--outside:not([aria-current]) {
    color: var(--color-gray-300);
  }

  .month-picker__day--today:not([aria-current]) {
    color: var(--color-blue-600);
  }

  .month-picker__date {
    font-size: var(--text-sm);
    line-height: 1.25rem;
    font-weight: var(--font-weight-semibold);
    font-variant-numeric: tabular-nums;
  }

  .month-agenda__day {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  .month-agenda__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }

  .month-agenda__title {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0 0.5rem;
    font-size: var(--text-lg);
    line-height: var(--text-lg--line-height);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
  }

  .month-agenda__date {
    font-size: var(--text-sm);
    font-weight: var(--font-weight-normal);
    color: var(--color-text-muted);
  }

  .month-agenda__time-off {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-lg);
    background: var(--stripes);
    box-shadow: inset 0 0 0 1px var(--color-gray-200);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);

    .icon { flex: none; color: var(--color-gray-500); }
  }

  .month-agenda__time-off-range {
    flex: none;
    margin-left: auto;
    font-size: var(--text-xs);
    color: var(--color-gray-500);
    white-space: nowrap;
  }

  .month-agenda__list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;

    > * { animation: fade-in-up 0.35s var(--ease-out) both; }
    > :nth-child(2) { animation-delay: 50ms; }
    > :nth-child(3) { animation-delay: 100ms; }
    > :nth-child(n + 4) { animation-delay: 150ms; }
  }

  .month-agenda__empty {
    animation: fade-in 0.3s var(--ease-out) both;
  }
}