/* The shared activity cards (js/activity-picker.js) on pages other than the enquiry form: the Tailwind classes the cards use that the
   site's pre-built src/output.css doesn't have (the enquiry form has its own copies inline), so they look as they were designed.
   Scoped to the cards. */
.mh-picker.gap-3 { gap: .75rem; }
@media (min-width: 640px) { .mh-picker.sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mh-picker .p-3 { padding: .75rem; }
.mh-picker .v2-activity-card { background: #fff; font: inherit; color: inherit; cursor: pointer; width: 100%; }
.mh-picker .v2-activity-card:focus { outline: none; }
.mh-picker .v2-activity-card:focus-visible { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #15803d; }
.mh-picker .border-gray-200 { border-color: #e5e7eb; }
.mh-picker .border-gray-300 { border-color: #d1d5db; }
.mh-picker .border-green-700, .mh-picker .hover\:border-green-700:hover { border-color: #15803d; }
.mh-picker .bg-green-50 { background-color: #f0fdf4; }
.mh-picker .bg-gray-50 { background-color: #f9fafb; }
.mh-picker .cursor-not-allowed { cursor: not-allowed; }
.mh-picker .text-xs { font-size: .75rem; line-height: 1rem; }
.mh-picker .font-normal { font-weight: 400; }
.mh-picker .whitespace-nowrap { white-space: nowrap; }
.mh-picker .text-green-800 { color: #166534; }
.mh-picker .text-amber-800 { color: #92400e; }
.mh-picker .text-gray-500 { color: #6b7280; }
.mh-picker .text-gray-400 { color: #9ca3af; }