@layer components {

  /* Week Calendar */

  .week-calendar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background: var(--color-border);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;

    @media (max-width: 640px) {
      grid-template-columns: 1fr;
    }
  }

  .week-calendar__day {
    background: var(--color-canvas);
    padding: var(--block-space-s) var(--inline-space-s);
    min-height: 8rem;
  }

  .week-calendar__day--today {
    background: color-mix(in srgb, oklch(var(--lch-blue)) 4%, var(--color-canvas));
  }

  .week-calendar__day-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-block-end: var(--block-space-s);
    border-block-end: 1px solid var(--color-border);
    margin-block-end: var(--block-space-s);
  }

  .week-calendar__weekday {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-ink-muted);
  }

  .week-calendar__date {
    font-size: 0.875rem;
    font-weight: 500;
  }

  .week-calendar__slots {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }

  .week-calendar__slot {
    padding: 0.15em 0.4em;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: var(--radius-sm);
    text-align: center;
  }

  .week-calendar__slot--available {
    color: oklch(var(--lch-green));
    background: color-mix(in srgb, oklch(var(--lch-green)) 12%, transparent);
  }

  .week-calendar__slot--booked {
    color: oklch(var(--lch-blue));
    background: color-mix(in srgb, oklch(var(--lch-blue)) 12%, transparent);
  }

  .week-calendar__empty {
    text-align: center;
    color: var(--color-ink-muted);
    font-size: 0.875rem;
    padding-block: var(--block-space-s);
  }

  .week-calendar__legend-item {
    display: inline-flex;
    align-items: center;
    gap: var(--inline-space-s);
    font-size: 0.8rem;
    color: var(--color-ink-muted);
  }

  /* Availability day fieldset (recurring schedule form) */

  .availability-day {
    padding: var(--block-space-s) var(--inline-space);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
  }

  .availability-range__input {
    width: auto;
    min-width: 8ch;
  }

}