/* Section: The problem (#matrix, first of the Matrix sections). Three data categories and the mismatch list.
   Independent of the other sections. Needs section-base.css. NB: the "Matrix" nav link anchors here;
   if this section is removed, point it at the next Matrix section. */

.prb__grid { display: grid; gap: var(--s-4); grid-template-columns: 1fr; }
@media (min-width: 800px) { .prb__grid { grid-template-columns: repeat(3, 1fr); } }

.prb__card { padding: var(--s-6); }
.prb__icon {
  display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: var(--s-5);
  border: 1px solid var(--border); border-radius: 8px; background: rgba(255, 255, 255, 0.03);
}
.prb__icon .glyph { width: 22px; height: 22px; stroke: var(--t-body); }
.prb__card .card__text { font-size: var(--fs-body); }

.prb__mismatch { margin-top: var(--s-5); padding: var(--s-6); display: grid; gap: var(--s-5); }
@media (min-width: 960px) {
  .prb__mismatch { grid-template-columns: minmax(0, 0.45fr) minmax(0, 1.55fr); gap: var(--s-8); align-items: start; }
}
.prb__lead { margin: 0; color: var(--t-head); font-size: var(--fs-h3); font-weight: 500; line-height: 1.25; letter-spacing: -0.005em; }
.prb__list { display: grid; gap: var(--s-4); margin: 0; padding: 0; list-style: none; counter-reset: prb; }
.prb__list li {
  position: relative; padding-left: var(--s-7); counter-increment: prb;
  color: var(--t-2); font-size: var(--fs-small); line-height: 1.55; max-width: 62ch;
}
.prb__list li::before {
  content: counter(prb, decimal-leading-zero); position: absolute; left: 0; top: 2px;
  font: 400 var(--fs-mono)/1 var(--font-mono); letter-spacing: 0.1em; color: var(--t-4);
}
.prb__list strong { color: var(--t-head); font-weight: 500; }