/* Volunteer days: day cards and lists, the day page (facts, notices, causes) and the organizer form (logical properties only). */
.days {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  gap: var(--s-4);
  margin: var(--s-5) 0 0;
  padding: 0;
  list-style: none;
}

.day h3 {
  max-inline-size: none;
  margin-inline: 0;
  overflow-wrap: anywhere;
}

.day h3 a {
  color: var(--text);
}

.day p + p {
  margin-block-start: var(--s-2);
}

.day-org {
  font-weight: 700;
}

.day-state {
  color: var(--accent-text);
  font-weight: 700;
}

.is-cancelled {
  --tone: var(--c-coral);
}

.is-cancelled h3 a {
  text-decoration: line-through;
}

.day-notice {
  max-inline-size: 46rem;
  margin: var(--s-4);
  padding: var(--s-3) var(--s-4);
  background: color-mix(in srgb, var(--c-sand) 30%, var(--surface));
  border-inline-start: 4px solid var(--c-sand);
  border-radius: var(--radius-sm);
}

@media (min-width: 800px) {
  .day-notice {
    margin-inline: auto;
  }
}

.day-banner {
  margin: 0;
  padding: var(--s-3) var(--s-4);
  border: 2px solid var(--c-coral);
  border-radius: var(--radius-sm);
  font-weight: 700;
}

.page-head .eyebrow a {
  color: inherit;
}

.day-body {
  max-inline-size: 46rem;
}

.day-body > h2 {
  margin-block: 0 var(--s-3);
  font-size: var(--fs-3);
  text-align: start;
}

.day-facts {
  display: grid;
  gap: var(--s-4);
  margin: 0;
}

.day-facts dt {
  font-weight: 700;
}

.day-facts dd {
  margin: 0;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.chips li {
  padding: var(--s-1) var(--s-3);
  background: color-mix(in srgb, var(--c-teal) 22%, var(--surface));
  border-radius: 999px;
  color: var(--text);
  font-size: var(--fs-0);
  font-weight: 600;
}

.pin-tools:not([hidden]) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
  margin: 0;
}

.roster {
  display: grid;
  gap: var(--s-2);
  margin: var(--s-3) 0 0;
  padding-inline-start: var(--s-5);
}