.matching-workspace {
  padding-block: var(--section-space);
}

.matching-recommendations {
  background: var(--color-bg-alt);
}

.preference-fieldset {
  margin: var(--matching-zero) var(--matching-zero) var(--space-5);
  padding: var(--matching-zero);
  border: var(--matching-zero);
}

.preference-fieldset legend {
  margin-bottom: var(--space-2);
  color: var(--color-ink);
  font-family: var(--font-heading);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-semibold);
}

.preference-fieldset legend small {
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: var(--matching-small-font-size);
}

.preference-chips {
  display: grid;
  grid-template-columns: var(--matching-chip-columns-mobile);
  gap: var(--space-1);
}

.preference-chip,
.gender-options button {
  position: relative;
  min-height: var(--matching-control-min-height);
  padding: var(--matching-control-padding-block) var(--matching-control-padding-inline);
  border: var(--matching-control-border);
  border-radius: var(--radius-button);
  background: var(--color-bg);
  color: var(--color-ink);
  cursor: pointer;
  text-align: left;
}

.preference-chip[aria-pressed="true"],
.gender-options button.is-selected {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-bg);
}

.preference-chip__order {
  display: inline-grid;
  width: var(--matching-order-size);
  height: var(--matching-order-size);
  margin-right: var(--matching-order-margin);
  border-radius: var(--radius-pill);
  background: var(--color-gold);
  color: var(--color-ink);
  font-size: var(--matching-order-font-size);
  font-weight: var(--font-weight-bold);
  place-items: center;
}

.preference-chip:disabled {
  opacity: var(--matching-disabled-opacity);
  cursor: not-allowed;
}

.preference-order {
  min-height: var(--matching-order-min-height);
  margin-top: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--matching-caption-font-size);
}

.gender-options {
  display: grid;
  grid-template-columns: var(--matching-gender-columns);
  gap: var(--space-1);
}

.gender-options button {
  text-align: center;
}

.matching-submit {
  display: flex;
  min-width: var(--matching-submit-min-width);
  margin: var(--matching-zero) auto;
}

.matching-submit:disabled {
  opacity: var(--matching-submitting-opacity);
  cursor: wait;
}

.matching-submit-error {
  padding: var(--space-1) var(--space-2);
  border-left: var(--matching-error-border);
  background: var(--matching-error-background);
  color: var(--matching-error-color);
}

.recommendation-grid {
  display: grid;
  max-width: var(--matching-grid-max-width);
  margin: var(--matching-zero) auto;
  gap: var(--space-3);
}

.recommendation-card {
  display: grid;
  padding: var(--space-3);
  border: var(--border-default);
  border-radius: var(--radius-card);
  background: var(--color-bg);
  box-shadow: var(--shadow-card);
  gap: var(--space-3);
}

.recommendation-card--best {
  border: var(--matching-best-border);
  background: var(--matching-best-background);
}

.recommendation-card__rank {
  color: var(--color-gold);
  font-family: var(--font-label);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--matching-rank-letter-spacing);
}

.recommendation-card__photo,
.recommendation-card__placeholder {
  width: var(--matching-card-photo-size);
  aspect-ratio: var(--matching-square-aspect-ratio);
  border-radius: var(--radius-pill);
  background: var(--color-sky);
  object-fit: cover;
}

.recommendation-card__placeholder {
  display: grid;
  color: var(--color-ink);
  font-family: var(--font-heading);
  font-size: var(--matching-placeholder-font-size);
  place-items: center;
}

.recommendation-card h2 {
  margin-bottom: var(--matching-card-heading-margin);
}

.recommendation-card__reason {
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-button);
  background: var(--color-sky);
  color: var(--color-ink);
}

.recommendation-contact {
  max-width: var(--matching-contact-max-width);
  margin: var(--space-7) auto var(--matching-zero);
  padding: var(--space-4);
  border-radius: var(--radius-card);
  background: var(--color-ink);
  color: var(--color-bg);
  text-align: center;
}

.recommendation-contact h2 {
  color: var(--color-bg);
}

@media (min-width: 48rem) {
  .preference-chips {
    grid-template-columns: var(--matching-chip-columns-tablet);
  }

  .recommendation-grid {
    grid-template-columns: var(--matching-recommendation-columns);
  }

  .recommendation-card {
    grid-template-columns: var(--matching-card-columns);
    align-items: center;
  }

  .recommendation-card--best {
    grid-column: var(--matching-best-column);
    padding: var(--space-4);
  }

  .recommendation-card--best .recommendation-card__photo,
  .recommendation-card--best .recommendation-card__placeholder {
    width: var(--matching-card-best-photo-size);
  }
}