.survey-phase-switch {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  padding: 4px;
  width: max-content;
  max-width: 100%;
  border: 1px solid #d8d8cf;
  border-radius: 12px;
  background: #f7f7f2;
}

.survey-phase-switch[hidden] { display: none; }

.survey-phase-switch button {
  padding: 9px 13px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #6b6e67;
  font-weight: 750;
  cursor: pointer;
}

.survey-phase-switch button.active {
  background: #274f3a;
  color: #fff;
}

.survey-optional-note {
  margin: 0 0 18px;
  padding: 11px 13px;
  border-radius: 10px;
  background: #f2f7f3;
  color: #31523c;
  font-size: .9rem;
}

.survey-field label b.optional-badge {
  background: #f0f0eb;
  color: #6b6e67;
}

.match-unknowns {
  border-left: 3px solid #d0ad54;
  padding-left: 10px;
}

.match-unknowns small { color: #7d651f; }

.match-coverage {
  grid-column: 1 / -1;
  margin: 2px 0 0 !important;
  padding-top: 7px;
  border-top: 1px solid #e3e1d8;
  color: #77776f !important;
  font-size: 10px !important;
}

.match-coverage strong { color: #4c6858; }

@media (max-width: 560px) {
  .survey-phase-switch { width: 100%; box-sizing: border-box; }
  .survey-phase-switch button { flex: 1; padding-inline: 8px; }
}