.availability-member-avatar {
  background-repeat: no-repeat !important;
  background-position: var(--member-x) var(--member-y) !important;
  background-size: 900% auto !important;
  box-shadow: 0 2px 7px rgba(49, 31, 31, .12);
}

.crew-shell {
  max-width: 980px;
}

.crew-intro {
  grid-template-columns: minmax(0, 1fr) minmax(240px, 360px);
}

.availability-slot-tabs,
.admin-slot-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 18px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #f2eee8;
}

.availability-slot-tabs button,
.admin-slot-tabs button {
  min-height: 34px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.availability-slot-tabs button.active,
.admin-slot-tabs button.active {
  background: #fff;
  color: var(--wine);
  box-shadow: 0 2px 8px rgba(49, 31, 31, .1);
}

#crew-availability-view .member-weekdays,
#crew-availability-view .member-days {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#crew-availability-view .member-weekdays span:first-child {
  color: #4f6682;
}

#crew-availability-view .member-weekdays span:last-child {
  color: var(--accent-text);
}

.member-day {
  display: grid;
  grid-template-rows: minmax(34px, 1fr) auto;
  padding: 0;
  cursor: default;
}

.member-day-placeholder {
  visibility: hidden;
  pointer-events: none;
}

.member-day-main {
  min-width: 0;
  min-height: 0;
  padding: 9px;
  border: 0;
  background: transparent;
  text-align: left;
}

.member-day-main b {
  display: block;
  font: 400 14px var(--serif);
}

.member-day.today .member-day-main b {
  display: grid;
  width: 25px;
  height: 25px;
  margin: -3px 0 3px -3px;
  place-items: center;
  border-radius: 50%;
  background: var(--wine);
  color: #fff;
}

.member-day-main:focus-visible {
  position: relative;
  z-index: 2;
  outline: 2px solid var(--wine);
  outline-offset: -3px;
}

.member-slot-choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  padding: 0 5px 5px;
}

.member-slot-choices button {
  min-width: 0;
  padding: 5px 2px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
}

.member-slot-choices button.selected {
  border-color: var(--wine);
  background: var(--wine);
  color: #fff;
}

.member-day.unavailable:after {
  display: none !important;
}

@media (max-width: 560px) {
  .member-day {
    grid-template-rows: minmax(28px, 1fr) auto;
  }

  .member-day-main {
    padding: 6px;
  }

  .member-slot-choices {
    gap: 2px;
    padding: 0 3px 4px;
  }

  .member-slot-choices button {
    padding: 4px 1px;
    font-size: 8px;
  }
}

.member-note-field {
  display: block;
  margin-top: 20px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.member-note-field textarea {
  display: block;
  width: 100%;
  margin-top: 7px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  font: 13px/1.6 var(--sans);
  resize: vertical;
}

.member-day.blocked {
  background: #e5e3e0 !important;
  color: #aaa5a0;
}

.member-day.outside:not(.blocked) {
  opacity: .42;
  background: #f8f5f1;
}

.member-day.outside:not(.blocked) .member-slot-choices {
  visibility: hidden;
}

.member-day.blocked .member-day-main,
.member-day.blocked .member-slot-choices button {
  cursor: not-allowed;
}

.member-day.blocked .member-slot-choices {
  opacity: .18;
}

.member-day.blocked .weekday-block-label {
  position: absolute;
  z-index: 3;
  right: 4px;
  bottom: 4px;
  left: 4px;
  display: grid;
  min-height: 20px;
  place-items: center;
  border-radius: 6px;
  background: #d5d2ce;
  color: #8f8983;
  font-size: 8px;
  font-weight: 800;
  pointer-events: none;
}

.member-day.blocked.today .member-day-main b {
  background: #b7b2ad;
  color: #f7f5f2;
}