@layer modules {
  .sessions-index {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
  }

  .sessions-index--week {
    height: calc(100dvh - 9rem - env(safe-area-inset-bottom));
    min-height: 28rem;
  }

  @media (min-width: 48rem) {
    .sessions-index--week { height: calc(100dvh - 4rem); }
  }

  @media (min-width: 64rem) {
    .sessions-index--month { min-height: calc(100dvh - 4rem); }
  }

  .sessions-index__header {
    display: flex;
    flex: none;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
  }

  .sessions-index__title {
    margin-right: auto;
    font-size: var(--text-xl);
    line-height: var(--text-xl--line-height);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--tracking-tight);
    color: var(--color-text);
    font-variant-numeric: tabular-nums;

    @media (min-width: 48rem) {
      font-size: var(--text-2xl);
      line-height: var(--text-2xl--line-height);
    }
  }

  .sessions-index__year {
    font-weight: var(--font-weight-normal);
    color: var(--color-text-muted);
  }

  .sessions-index__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;

    @media (max-width: 47.99rem) {
      flex-wrap: nowrap;
      width: 100%;

      .period-nav { flex: 1; }
    }

    @media (min-width: 48rem) { gap: 0.75rem; }
  }

  /* Sessions on the week and month calendars */

  .calendar-event {
    --event-top: color-mix(in oklab, var(--color-blue-50) 40%, var(--color-white));
    --event-bottom: color-mix(in oklab, var(--color-blue-100) 70%, var(--color-blue-50));
    --event-bg: linear-gradient(to bottom, var(--event-top), var(--event-bottom));
    --event-ring: color-mix(in oklab, var(--color-blue-500) 24%, transparent);
    --event-gloss: var(--color-white-90);
    --event-emboss: var(--color-white-70);
    --event-ink: var(--color-blue-900);
    --event-meta: var(--color-blue-700);
    --event-shadow: 0 1px 2px -1px rgb(15 23 42 / 0.16), 0 2px 4px -2px rgb(15 23 42 / 0.06);
  }

  .calendar-event--live {
    --event-bg: var(--gradient-accent);
    --event-ring: color-mix(in oklab, var(--color-blue-700) 60%, transparent);
    --event-gloss: var(--color-white-20);
    --event-emboss: rgb(15 23 42 / 0.15);
    --event-ink: var(--color-white);
    --event-meta: var(--color-blue-100);
    --event-shadow: 0 1px 2px -1px rgb(37 99 235 / 0.4), 0 4px 10px -4px rgb(37 99 235 / 0.45);
  }

  .calendar-event--past {
    --event-top: var(--color-white);
    --event-bottom: var(--color-slate-100);
    --event-ring: var(--color-slate-200);
    --event-ink: var(--color-slate-700);
    --event-meta: var(--color-slate-500);
  }

  .calendar-event--cancelled {
    --event-bg: var(--stripes);
    --event-ring: var(--color-gray-200);
    --event-gloss: transparent;
    --event-emboss: transparent;
    --event-ink: var(--color-gray-500);
    --event-meta: var(--color-gray-400);
    --event-shadow: 0 0 #0000;
  }

  .calendar-event--conflict {
    --event-top: color-mix(in oklab, var(--color-amber-50) 40%, var(--color-white));
    --event-bottom: color-mix(in oklab, var(--color-amber-100) 70%, var(--color-amber-50));
    --event-ring: var(--color-amber-300);
    --event-ink: var(--color-amber-900);
    --event-meta: var(--color-amber-800);
  }

  .calendar-event__surface {
    background: var(--event-bg);
    box-shadow:
      inset 0 1px 0 0 var(--event-gloss),
      inset 0 -1px 0 0 rgb(15 23 42 / 0.04),
      inset 0 0 0 1px var(--event-ring),
      var(--event-shadow);
    color: var(--event-ink);
    text-shadow: 0 1px 0 var(--event-emboss);

    &:hover {
      --event-shadow: 0 1px 2px -1px rgb(15 23 42 / 0.16), var(--shadow-md);
      translate: 0 -1px;
    }
  }

  .calendar-event__icon {
    flex: none;
    width: 0.75rem;
    height: 0.75rem;
  }

  .calendar-event__icon--conflict {
    color: var(--color-amber-600);
  }

  .calendar-event__icon--repeat {
    color: var(--event-meta);
  }

  /* Session dots on the mobile week strip and month picker */

  .day-dots {
    display: flex;
    gap: 0.125rem;
    height: 0.25rem;
  }

  .day-dot {
    width: 0.25rem;
    height: 0.25rem;
    border-radius: var(--radius-full);
    background-color: var(--color-blue-400);
  }

  .day-dot--conflict {
    background-color: var(--color-amber-500);
  }

  .day-dot--time-off {
    background-color: transparent;
    box-shadow: inset 0 0 0 1px var(--color-gray-400);
  }

  .week-strip__day[aria-pressed="true"] .day-dot,
  .month-picker__day[aria-current] .day-dot {
    background-color: var(--color-white-70);
  }

  .week-strip__day[aria-pressed="true"] .day-dot--time-off,
  .month-picker__day[aria-current] .day-dot--time-off {
    background-color: transparent;
    box-shadow: inset 0 0 0 1px var(--color-white-70);
  }

  .sessions-index__new {
    --btn-padding: 0.5rem;

    @media (min-width: 40rem) { --btn-padding: 0.5rem 1rem 0.5rem 0.75rem; }
    @media (min-width: 48rem) { order: 1; }
  }
}