/* ============================================================
   20 — TOPIC GRID
   Scope: .supt*
   ============================================================ */

.supt__head { max-width: 58ch; margin-block-end: var(--s-8); }

.supt__title { font-size: var(--fs-h2); }

.supt__note {
  margin-block-start: var(--s-4);
  font-size: var(--fs-sm);
  color: var(--text-body);
}

.supt__grid {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.supt__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-3);
  width: 100%;
  height: 100%;
  min-height: calc(var(--s-13) + var(--s-4));
  padding: var(--s-6);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border);
  text-align: start;
  transition: transform var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out),
              background var(--t-fast) var(--ease-out);
}

.supt__card:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-brand) 42%, transparent), var(--sh-md);
}

.supt__card[aria-pressed="true"] {
  background: var(--c-brand-tint);
  box-shadow: inset 0 0 0 1px var(--c-brand), var(--sh-sm);
}

.supt__ico {
  width: var(--s-6);
  height: var(--s-6);
  color: var(--c-brand);
  /* Optical, not metric: the marks are drawn to a 24 box with light
     stroke, so a half-step of extra air keeps them off the title. */
  margin-block-end: var(--s-1);
}

.supt__t {
  font-size: var(--fs-body);
  font-weight: var(--fw-semi);
  color: var(--text-strong);
  letter-spacing: var(--tracking-snug);
  line-height: var(--lh-snug);
  text-wrap: balance;
}

/* Pushed to the card's foot so every count sits on one baseline across
   the row, regardless of how many lines the title takes. */
.supt__n {
  margin-block-start: auto;
  font-size: var(--fs-xs);
  /* --text-muted is 4.3:1 on white — under AA for 13px. Size carries the
     hierarchy instead of colour. */
  color: var(--text-body);
  font-variant-numeric: tabular-nums;
}
.supt__card[aria-pressed="true"] .supt__n { color: var(--c-brand-press); }