/* Volunteer - ported from volunteer/VolunteerForm.module.scss */
.volunteer-form {
  max-width: 46rem;
  padding: 1.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
}
.volunteer-form[hidden], .volunteer-done[hidden] { display: none; }

.volunteer-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0 1rem;
}

.volunteer-group { border: 0; padding: 0; min-width: 0; }
.volunteer-group__label {
  padding: 0;
  margin-bottom: 0.35rem;
  font-size: 0.82rem;
  font-weight: 600;
}

.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.chip { position: relative; cursor: pointer; }
/* Visually hidden but still focusable and announced as a checkbox. */
.chip input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}
.chip span {
  display: inline-block;
  font-size: 0.83rem;
  font-weight: 500;
  padding: 0.42rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  user-select: none;
}
.chip:hover span { border-color: var(--brand); }
.chip input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.chip input:checked + span {
  background: var(--brand-light);
  border-color: var(--brand);
  color: var(--brand-dark);
  font-weight: 600;
}

.volunteer-done {
  max-width: 40rem;
  padding: 2.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-tint);
}