/* Recognition location-frequency heat: province and city counters stay independent. */
:where(#vision-province, #flock-province) .vision-choice.location-usage-heat,
.vision-city-choice.location-usage-heat {
  background: var(--location-usage-bg, #eff6fc);
  border-color: var(--location-usage-border, #d7e5f1);
  color: var(--location-usage-text, #4c6d8d);
  transition: background-color .24s ease, border-color .24s ease, color .24s ease, box-shadow .16s ease;
}

:where(#vision-province, #flock-province) .vision-choice.location-usage-heat:hover,
.vision-city-choice.location-usage-heat:hover,
.vision-city-choice.location-usage-heat:focus-visible {
  border-color: #7099c4;
  box-shadow: 0 2px 7px rgba(55, 94, 137, .13);
}

:where(#vision-province, #flock-province) .vision-choice.location-usage-heat.is-selected,
.vision-city-choice.location-usage-heat.is-selected {
  background: #668dc6;
  border-color: #567cae;
  color: #fff;
  font-weight: 600;
  box-shadow: 0 0 0 2px rgba(63, 111, 159, .13);
}

body.compact-layout :where(#vision-province, #flock-province) .vision-choice.location-usage-heat {
  background: var(--location-usage-bg, #eff6fc) !important;
  border-color: var(--location-usage-border, #d7e5f1) !important;
  color: var(--location-usage-text, #4c6d8d) !important;
}

body.compact-layout :where(#vision-province, #flock-province) .vision-choice.location-usage-heat.is-selected {
  background: #668dc6 !important;
  border-color: #567cae !important;
  color: #fff !important;
}