@layer modules {
  .week-calendar {
    --hour-height: 80px;
    --gutter: 3rem;
    --week-day: minmax(0, 1fr);
    --week-weekend-day: var(--week-day);
    --week-weekend: 0rem;
    --week-transition-duration: 0.3s;
    --week-columns: var(--gutter) var(--week-day) var(--week-day) var(--week-day) var(--week-day) var(--week-day)
      var(--week-weekend-day) var(--week-weekend-day) var(--week-weekend);

    position: relative;
    z-index: 0;
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
    overflow: clip;

    @media (min-width: 64rem) {
      --gutter: 4rem;
      --headers-height: 5.75rem;
    }
  }

  .week-calendar--weekends-collapsed {
    @media (min-width: 64rem) {
      --week-weekend-day: minmax(0, 0fr);
      --week-weekend: 6rem;
    }
  }

  .week-calendar--dragging {
    cursor: grabbing;
    user-select: none;

    .week-calendar__event:not(.week-calendar__event--lifted) { pointer-events: none; }
  }

  .week-calendar__scroller {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* Day headers */

  .week-calendar__headers {
    position: sticky;
    top: 0;
    z-index: 40;
    display: none;
    grid-template-columns: var(--week-columns);
    transition: grid-template-columns var(--week-transition-duration) var(--ease-in-out);
    border-bottom: 1px solid var(--color-border);
    background-image: var(--gradient-header);

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

  .week-calendar__zone {
    align-self: end;
    padding: 0 0.5rem 0.5rem 0;
    text-align: right;
    font-size: 0.625rem;
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--tracking-wide);
    color: var(--color-text-muted);
  }

  .week-calendar__day {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.125rem;
    padding: 0.625rem 0.25rem 0.5rem;
    border-left: 1px solid var(--color-border);
  }

  .week-calendar__weekday {
    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);
  }

  .week-calendar__date {
    display: grid;
    place-items: center;
    min-width: 2.25rem;
    height: 2.25rem;
    padding-inline: 0.25rem;
    border-radius: var(--radius-full);
    font-size: var(--text-xl);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--tracking-tight);
    font-variant-numeric: tabular-nums;
    color: var(--color-text);
  }

  .week-calendar__count {
    min-height: 1rem;
    font-size: var(--text-2xs);
    line-height: 1rem;
    color: var(--color-text-muted);
    white-space: nowrap;
  }

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

  .week-calendar__day--today {
    .week-calendar__weekday { color: var(--color-blue-600); }

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

  /* Weekend toggle */

  .weekend-toggle-form {
    grid-column: span 3;
    min-width: 0;
    border-left: 1px solid var(--color-border);
  }

  .weekend-toggle {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    color: var(--color-text-soft);
    transition: background-color var(--default-transition-duration);

    &:hover,
    &:focus-visible {
      background-color: var(--color-blue-50);

      .week-calendar__weekday { color: var(--color-blue-700); }
    }

    &[aria-expanded="true"] .weekend-toggle__summary,
    &[aria-expanded="false"] .weekend-toggle__dates { display: none; }
  }

  .weekend-toggle__summary {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    margin-left: auto;
    max-width: 6rem;
    animation: fade-in 0.3s var(--ease-out) both;
  }

  .weekend-toggle__range {
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
    font-variant-numeric: tabular-nums;
    color: var(--color-text);
  }

  .weekend-toggle__dates {
    display: grid;
    flex: 1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 0;

    > .week-calendar__day:first-child { border-left: 0; }
  }

  .weekend-toggle__handle {
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 1.25rem;
    height: 1.25rem;
    translate: -50% -50%;
    border-radius: var(--radius-full);
    background-color: var(--color-surface);
    box-shadow: 0 0 0 1px var(--color-border-strong), var(--shadow-xs);
    font-size: 0.75rem;
    color: var(--color-text-muted);
    transition: rotate var(--week-transition-duration) var(--ease-in-out), scale 0.15s var(--ease-out);

    .weekend-toggle[aria-expanded="false"] & { rotate: 180deg; }

    .weekend-toggle:hover &,
    .weekend-toggle:focus-visible & {
      scale: 1.15;
      color: var(--color-blue-700);
    }
  }

  .weekend-summary {
    position: sticky;
    top: var(--headers-height, 0);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.75rem 0.25rem;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    text-align: center;
  }

  /* Time grid */

  .week-calendar__grid {
    position: relative;
    display: grid;
    height: calc(24 * var(--hour-height));
    grid-template-columns: var(--gutter) minmax(0, 1fr);
    touch-action: pan-y;

    @media (min-width: 64rem) {
      grid-template-columns: var(--week-columns);
      transition: grid-template-columns var(--week-transition-duration) var(--ease-in-out);
    }
  }

  .week-calendar__times {
    position: relative;
  }

  .week-calendar__time,
  .week-calendar__scroll-anchor,
  .week-calendar__event,
  .week-calendar__time-off,
  .week-calendar__draft,
  .week-calendar__hover,
  .current-time-indicator {
    top: calc(var(--start) / 60 * var(--hour-height));
  }

  .week-calendar__event,
  .week-calendar__draft,
  .week-calendar__hover {
    position: absolute;
    left: 0.1875rem;
    right: 0.375rem;
    border-radius: var(--radius-md);
  }

  .week-calendar__draft,
  .week-calendar__hover {
    height: calc(var(--duration) / 60 * var(--hour-height));
  }

  .week-calendar__event,
  .week-calendar__time-off {
    height: max(1.5rem, calc(var(--duration) / 60 * var(--hour-height)));
  }

  .week-calendar__time {
    position: absolute;
    right: 0.5rem;
    translate: 0 -50%;
    font-size: var(--text-2xs);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--color-gray-400);
    white-space: nowrap;
  }

  .week-calendar__scroll-anchor {
    position: absolute;
  }

  .week-calendar__column {
    position: relative;
    display: none;
    border-left: 1px solid var(--color-border);
    background-image:
      linear-gradient(to bottom, var(--color-gray-100) 1px, transparent 1px),
      linear-gradient(to bottom, transparent calc(var(--hour-height) / 2), var(--color-gray-50) 0, var(--color-gray-50) calc(var(--hour-height) / 2 + 1px), transparent 0);
    background-size: 100% var(--hour-height);
    -webkit-touch-callout: none;

    &[data-selected] {
      display: block;
      animation: day-in-next 0.28s var(--ease-out);
    }

    [data-direction="previous"] &[data-selected] { animation-name: day-in-previous; }

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

      &[data-selected] { animation: none; }
    }
  }

  .week-calendar__column--today {
    background-color: color-mix(in oklab, var(--color-blue-50) 55%, transparent);
  }

  .week-calendar__column--weekend {
    background-color: var(--color-surface-muted);

    @media (min-width: 64rem) {
      clip-path: inset(0 0 0 -1rem);
      transition: visibility var(--week-transition-duration);

      .week-calendar--weekends-collapsed & { visibility: hidden; }
    }
  }

  .week-calendar__weekend {
    display: none;
    overflow: clip;
    box-shadow: inset 1px 0 var(--color-border);
    background-color: var(--color-surface-muted);
    transition: visibility var(--week-transition-duration);

    .week-calendar:not(.week-calendar--weekends-collapsed) & { visibility: hidden; }

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

  /* Sessions */

  .week-calendar__event {
    z-index: 10;
    overflow: hidden;
    user-select: none;
    animation: calendar-event-in 0.4s var(--ease-out) backwards;
    animation-delay: calc(var(--event-index, 0) * 40ms);
    transition: box-shadow 0.15s var(--ease-out), translate 0.15s var(--ease-out), scale 0.15s var(--ease-out), top 0.1s var(--ease-out);

    &[data-schedule-url] { cursor: grab; }

    &:hover { z-index: 15; }
  }

  .week-calendar__event.calendar-event--live {
    .week-calendar__event-name::before {
      content: "";
      flex: none;
      width: 0.375rem;
      height: 0.375rem;
      border-radius: var(--radius-full);
      background-color: currentColor;
      box-shadow: 0 0 0 0 var(--color-white-70);
      animation: calendar-live 2s var(--ease-out) infinite;
    }
  }

  .week-calendar__event.calendar-event--cancelled {
    .week-calendar__event-name,
    .week-calendar__event-meta { text-decoration-line: line-through; }
  }

  .week-calendar__event--conflict {
    left: calc((100% - 0.5625rem) * var(--lane) / var(--lanes) + 0.1875rem);
    right: auto;
    width: calc((100% - 0.5625rem) / var(--lanes) - 0.125rem);
  }

  .week-calendar__event--lifted {
    scale: 1.03;
    transition: box-shadow 0.15s var(--ease-out), scale 0.15s var(--ease-out-overshoot-subtle), top 0.06s linear;

    &, &:hover {
      --event-shadow: var(--shadow-xl);
      z-index: 50;
      translate: none;
      cursor: grabbing;
    }
  }

  .week-calendar__event--saving {
    animation: pulse 1s ease-in-out infinite;
  }

  .week-calendar__event-link {
    scroll-margin-top: var(--headers-height, 0);
    display: flex;
    flex-direction: column;
    gap: 0.0625rem;
    height: 100%;
    padding: 0.25rem 0.5rem;
    color: inherit;
    -webkit-touch-callout: none;

    &:focus-visible {
      outline: var(--focus-ring);
      outline-offset: calc(-1 * var(--focus-ring-size));
      border-radius: inherit;
    }
  }

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

  .week-calendar__event-time,
  .week-calendar__event-meta {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
    font-size: var(--text-2xs);
    line-height: 0.875rem;
    font-variant-numeric: tabular-nums;
    color: var(--event-meta);
    white-space: nowrap;
    overflow: hidden;
  }

  .week-calendar__event--compact .week-calendar__event-link {
    flex-direction: row;
    align-items: center;
    gap: 0.375rem;
    padding-block: 0;
  }

  /* Time off */

  .week-calendar__time-off {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 5;
    background: var(--stripes);
    border-block: 1px solid var(--color-gray-200);
    pointer-events: none;
  }

  .week-calendar__time-off-label {
    position: sticky;
    top: var(--headers-height, 0);
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    font-size: var(--text-xs);
    line-height: 1rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-500);
    white-space: nowrap;
    overflow: hidden;

    .icon { flex: none; }
  }

  /* Drafting a new session */

  .week-calendar__draft {
    z-index: 45;
    display: flex;
    flex-direction: column;
    padding: 0.25rem 0.5rem;
    background-image: var(--gradient-accent);
    color: var(--color-white);
    box-shadow: inset 0 1px 0 var(--color-white-20), var(--shadow-lg);
    font-size: var(--text-xs);
    line-height: 1rem;
    overflow: hidden;
    pointer-events: none;
    animation: calendar-draft-in 0.2s var(--ease-out-overshoot-subtle) both;
    transition: top 0.06s linear, height 0.06s linear;
  }

  .week-calendar__draft-title {
    font-weight: var(--font-weight-semibold);
  }

  .week-calendar__draft-time {
    font-size: var(--text-2xs);
    font-variant-numeric: tabular-nums;
    color: var(--color-blue-100);
  }

  .week-calendar__draft--placed {
    box-shadow: inset 0 1px 0 var(--color-white-20), 0 0 0 3px color-mix(in oklab, var(--color-blue-500) 30%, transparent), var(--shadow-lg);
  }

  .week-calendar__hover {
    z-index: 4;
    padding: 0.125rem 0.5rem;
    background-color: color-mix(in oklab, var(--color-blue-100) 45%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--color-blue-500) 25%, transparent);
    font-size: var(--text-2xs);
    line-height: 1rem;
    font-weight: var(--font-weight-medium);
    font-variant-numeric: tabular-nums;
    color: var(--color-blue-700);
    pointer-events: none;
    animation: fade-in 0.15s var(--ease-out);
  }

  /* Now */

  .current-time-indicator {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 20;
    pointer-events: none;
  }

  .current-time-indicator__dot {
    position: absolute;
    left: -0.3125rem;
    top: -0.25rem;
    width: 0.625rem;
    height: 0.625rem;
    border-radius: var(--radius-full);
    background-color: var(--color-red-500);
    box-shadow: 0 0 0 2px var(--color-surface);

    &::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background-color: var(--color-red-500);
      animation: var(--animate-ping);
      animation-duration: 2s;
    }
  }

  .current-time-indicator__line {
    height: 2px;
    background-color: var(--color-red-500);
  }

  /* Day strip */

  .week-strip {
    display: grid;
    flex: none;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.25rem;
    padding: 0.5rem;
    border-bottom: 1px solid var(--color-border);
    background-image: var(--gradient-header);

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

  .week-strip__day {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.125rem;
    padding: 0.375rem 0 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.94; }

    &[aria-pressed="true"] {
      background-image: var(--gradient-accent);
      color: var(--color-white);
      box-shadow: var(--bevel-accent);

      .week-strip__weekday { color: var(--color-blue-100); }
    }
  }

  .week-strip__weekday {
    font-size: var(--text-2xs);
    line-height: 1rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-muted);
  }

  .week-strip__day--today:not([aria-pressed="true"]) {
    color: var(--color-blue-600);

    .week-strip__weekday { color: var(--color-blue-600); }
  }

  .week-strip__date {
    font-size: var(--text-base);
    line-height: 1.25rem;
    font-weight: var(--font-weight-semibold);
    font-variant-numeric: tabular-nums;
  }
}