/* ==========================================================================
   Membership - Start Date Selection Page
   ========================================================================== */

.membership-select {
  height: 100vh;
  overflow-x: hidden;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--spacing-page-bottom);
}

body:has(.membership-select) {
  overflow: hidden;
  padding-top: 0;
}

body:has(.membership-select) main {
  padding-bottom: 0;
}

.membership-select > .header--sticky + * {
  padding-top: env(safe-area-inset-top);
}

.membership-select__content {
  padding: var(--spacing-section) var(--spacing-section) 0;
}

/* Project Info */
.membership-select__project {
  text-align: center;
  margin-bottom: var(--spacing-section-gap);
}

.membership-select__thumbnail {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-base);
  background-size: cover;
  background-position: center;
  background-color: var(--color-border-soft);
  margin: 0 auto var(--spacing-list-md);
}

.membership-select__project-title {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  letter-spacing: var(--letter-spacing-tight);
  margin: 0 0 var(--spacing-1) 0;
}

.membership-select__project-meta {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  letter-spacing: var(--letter-spacing-tight);
  margin: 0;
}

/* Inline Calendar — card fill background, edge-to-edge within content padding */
.membership-select__calendar {
  background: var(--color-card-fill);
  border-radius: var(--radius-lg);
  padding: var(--spacing-section);
  margin-left: calc(-1 * var(--spacing-section));
  margin-right: calc(-1 * var(--spacing-section));
}

.membership-select__calendar .week-picker__weekdays span {
  font-size: var(--font-size-xs);
  padding: var(--spacing-1) 2px;
}

.membership-select__calendar .week-picker__days {
  gap: 2px;
}

.membership-select__calendar .week-picker__week {
  padding: var(--spacing-1) var(--spacing-1);
}

.membership-select__calendar .week-picker__day {
  height: 36px;
  font-size: var(--font-size-sm);
}

/* Range Label */
.membership-select__range-wrap {
  text-align: center;
}

.membership-select__range-label {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  letter-spacing: var(--letter-spacing-tight);
  text-align: center;
  margin: var(--spacing-section) 0 0;
}

.membership-select__range-label:empty {
  display: none;
}