#compact-cards { display: none; }
@media screen and (max-width: 800px) {
  #compact-cards { display: inline-flex; min-height: 44px; align-items: center; }
  body.compact-cards #results.grid { gap: 12px; }
  body.compact-cards #results .card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: auto; min-height: 48px; padding: 10px 12px; }
  body.compact-cards #results .sample-label,
  body.compact-cards #results .badge { position: static; min-width: 0; max-width: 60%; overflow-wrap: anywhere; white-space: normal; }
  body.compact-cards #results .card-body { padding: 12px; }
  body.compact-cards #results .card h3 { margin-bottom: 4px; }
  body.compact-cards #results .roll-total { margin-top: 8px; font-size: 1.125rem; }
  body.compact-cards #results .card-body > .packaging { margin-bottom: 10px; }
  body.compact-cards #results .card-foot { margin-top: auto; padding-top: 10px; }
  body.compact-cards #results .card-foot button { min-height: 44px; }
  body.compact-cards #results .family-colours { height: 32px; }
  body.compact-cards #results .family-details { margin-top: 8px; }
}