/* Problem cards (step 2) and product cards (results). Colour lives in the icon tile only. */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--s3); margin-bottom: var(--s4); }

.problem-card {
  position: relative; display: flex; flex-direction: column; gap: var(--s2);
  padding: var(--s4) var(--s3) var(--s3); cursor: pointer;
  background: var(--white); border: 1px solid var(--border); border-radius: var(--r-card);
}
.problem-card:hover { border-color: var(--charcoal); }
.problem-card__input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; cursor: pointer; margin: 0; }
.problem-card:has(.problem-card__input:checked) { border: 2px solid var(--charcoal); padding: calc(var(--s4) - 1px) calc(var(--s3) - 1px) calc(var(--s3) - 1px); }
.problem-card:has(.problem-card__input:focus-visible) { outline: 2px solid var(--brand-dark); outline-offset: 2px; }
.public .problem-card:hover { box-shadow: var(--shadow-2); }
.public .problem-card:has(.problem-card__input:checked) { box-shadow: var(--shadow-1); }

.problem-card__tile { display: grid; place-items: center; width: 64px; height: 64px; border-radius: var(--r-tile); background: var(--blue-tint); }
.problem-card__tile--plum { background: var(--plum-tint); }
.problem-card__tile--blue { background: var(--blue-tint); }
.problem-card__tile--yellow { background: var(--yellow-tint); }
.problem-card__tile--teal { background: var(--teal-tint); }
.problem-card__tile--green { background: var(--green-tint); }

.problem-card__text { font-weight: 500; }
.problem-card__tick, .problem-card__state { display: none; }
.problem-card:has(.problem-card__input:checked) .problem-card__tick {
  display: grid; place-items: center; position: absolute; top: var(--s2); right: var(--s2);
  width: 28px; height: 28px; border-radius: 50%; background: var(--charcoal); color: var(--white);
}
.problem-card:has(.problem-card__input:checked) .problem-card__state { display: block; font-size: 14px; line-height: 20px; font-weight: 600; }

.product-card { border: 1px solid var(--border); border-radius: var(--r-card); padding: var(--s4); background: var(--white); }
.product-card__name { margin: 0 0 var(--s2); font-size: 20px; line-height: 28px; font-weight: 600; }
.public .product-card { box-shadow: var(--shadow-1); }
.badge { display: inline-block; background: var(--plum-tint); color: var(--charcoal); border-radius: var(--r-control); padding: var(--s1) var(--s2); font-size: 14px; line-height: 20px; font-weight: 600; }

.facts { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); margin: 0; }
.facts dt { font-size: 14px; line-height: 20px; color: var(--text-2); }
.facts dd { margin: 0; font-weight: 600; }

/* Problem step: popular cards first, the rest folded away, and a card for "something else" on its own. */
.problem-card__detail { display: block; margin-top: var(--s1); font-size: 14px; line-height: 20px; font-weight: 400; color: var(--text-2); }
.see-all { margin: var(--s4) 0; }
.see-all > summary { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--charcoal); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.see-all[open] > summary { margin-bottom: var(--s3); }
.card-grid--single { margin-top: var(--s4); grid-template-columns: minmax(0, 1fr); }