/* 参加者の開閉・タグカード。開催一覧と月別申込フォームで共用する。 */
.event-participants {
  margin-top: 1rem;
  min-width: 0;
}
.event-participants > summary {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: .5rem;
  padding: .625rem 1rem;
  border: 1px solid rgba(242, 140, 40, .38);
  border-radius: .625rem;
  background: rgba(255, 255, 255, .88);
  color: #8A4509;
  font-size: .875rem;
  font-weight: 800;
  line-height: 1.5;
  list-style: none;
  cursor: pointer;
  user-select: none;
}
.event-participants > summary::-webkit-details-marker { display: none; }
.event-participants > summary::marker { content: ''; }
.event-participants > summary:hover { background: #FFF7EC; }
.event-participants > summary:focus-visible {
  outline: 3px solid #2F80ED;
  outline-offset: 3px;
}
.event-participants .participants-icon { font-size: 1.25rem; }
.participants-chevron {
  width: .5rem;
  height: .5rem;
  margin: -.25rem .125rem 0 .375rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}
.event-participants[open] .participants-chevron {
  margin-top: .25rem;
  transform: rotate(225deg);
}
.participants-label-close,
.event-participants[open] .participants-label-open { display: none; }
.event-participants[open] .participants-label-close { display: inline; }
.participants-panel {
  container-type: inline-size;
  margin-top: .75rem;
  padding: 1rem;
  border-radius: .75rem;
  background: rgba(255, 255, 255, .82);
}
.participants-heading {
  color: #2B1A12;
  font-size: .875rem;
  font-weight: 800;
  line-height: 1.75;
}
.participants-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: .625rem;
  margin-top: .75rem;
  list-style: none;
}
.participants-list[data-participant-count="0"],
.event-participants[data-roster-state="empty"] .participants-list,
.event-participants[data-roster-state="unavailable"] .participants-list { display: none; }
.participant-tag {
  display: flex;
  min-width: 0;
  min-height: 52px;
  align-items: center;
  gap: .5rem;
  padding: .625rem .75rem;
  border: 1px solid rgba(242, 140, 40, .24);
  border-radius: .625rem;
  background: #FFF7EC;
  color: #2B1A12;
  font-size: .875rem;
  font-weight: 700;
  line-height: 1.65;
}
.participant-tag.participant-tag--linked {
  padding: 0;
  border-color: #DC8024;
  background: #FFF0DB;
}
.participant-tag--linked:hover {
  border-color: #B65A0B;
  background: #FFE9CC;
}
.participant-profile-link {
  display: flex;
  width: 100%;
  min-width: 0;
  min-height: 50px;
  align-items: center;
  gap: .5rem;
  padding: .625rem .75rem;
  border-radius: inherit;
  color: inherit;
  text-decoration: none;
}
.participant-profile-link:hover,
.participant-profile-link:focus-visible,
.participant-profile-link .participant-name {
  text-decoration: none;
}
.participant-profile-link .participant-name {
  color: #8A4509;
  font-weight: 800;
}
.participant-profile-link:focus-visible {
  outline: 3px solid #2F80ED;
  outline-offset: 3px;
}
.participant-avatar {
  flex: 0 0 auto;
  width: 1.375rem;
  height: 1.375rem;
  color: #B65A0B;
}
.participant-name {
  min-width: 0;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.participant-group-name {
  white-space: nowrap;
}
.participants-note {
  margin-top: .75rem;
  color: #57534E;
  font-size: .75rem;
  line-height: 1.75;
}
.participants-message {
  margin-top: .5rem;
  color: #57534E;
  font-size: .875rem;
  line-height: 1.75;
}
@media (min-width: 640px) {
  .participants-panel { padding: 1.25rem; }
}
@container (max-width: 479px) {
  .participant-tag { gap: .375rem; padding: .625rem .5rem; }
  .participant-profile-link { gap: .375rem; padding: .625rem .5rem; }
  .participant-avatar { width: 1.125rem; height: 1.125rem; }
}
@container (max-width: 239px) {
  .participants-list { grid-template-columns: minmax(0, 1fr); }
}
@container (min-width: 480px) {
  .participants-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container (min-width: 820px) {
  .participants-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.event-participants--overview {
  margin: 0 0 .75rem;
}
.event-overview-column:has(.event-participants[open]) {
  position: static;
}