Алексей

Чат на ajax - мне кажется не лучшим решением. Возможно лучше использовать web-сокеты.

Вопрос в том, каким образом выявить признак "серости" адреса

Да элементарно - если ваши сервисы доступны, значит белый, иначе серый.

если такой адрес может начинаться с 77.ххх.ххх.ххх (так же, как и белый).

Не может. Не конечно теоретически можно засунуть белый адрес за NAT, но никто в здравом уме так делать не будет.
Поэтому определяется элементарно.
Серые адреса начинаются на -
10
100
127
169
172
192
Все остальные - белые.

Скорее всего вы не там смотрите адрес.
Единственное место где можно смотреть адрес - интерфейс устройства которое получило адрес.
А то некоторые люди умудряются смотреть свой адрес на ресурсах вроде 2ip.ru... Не уподобляйтесь таким людям.

Можешь посмотреть как сделанно здесь https://codepen.io/erikterwan/pen/EVzeRP, тоже без JS. Но вот как можно анчекнуть checkbox по медиазапросу без JS ничего в голову не приходит...
Вот так можно на JS:

const mq  = window.matchMedia("(max-width: 700px)");
const checkbox = document.querySelector('#burger-active');

window.addEventListener('resize', function(){
if(!mq.matches && checkbox.checked) {
	checkbox.checked = false;
}
});

Можно и нужно реализовать на css. что-то вроде

.menu .child-block{
    display:none;
}
.menu:hover .child-block{
    display:block;
}

Конкретно по вашей проблеме - можно определять телефон это, либо нет, после чего подменять событие hover на событие click на тачскринах. Но проще и правильнее действовать первым вариантом

Нет.

И будет ли страдать скорость от того, что wi-fi ретранслируется все дальше и дальше?

Да.

Разумно ли использовать для этой цели ретрансляторы или воспользоваться другими вариантами? Область покрытия 1-5 км.

Да. Ставим несколько секторных БС в разных точках села. Точнее надо по местности смотреть.

мультифон

.box {
background: 
  url('boxBg.png') center, 
  url('img1.png') top left no-repeat, 
  url('img2.png') top right no-repeat, 
  url('img3.png') bottom left no-repeat, 
  url('img4.png') bottom right no-repeat
;
}

Вот, уже 4 угла и фон есть)) и никакие псевдоэлементы с дивами не нужны

Пользуюсь таким сетапом несколько лет. Проблем не было. Единственное что - у меня два контроллера и их виртуалку прибиты гвоздями к гиппервизорам (запускаются/выключаются вместе с ним)

Никак
Дублируйте генерацию на стороне сервера

1) Создать таблицу городов
2) Создать таблицу магазинов с привязкой магазина к ID города
3) Вставить в value опшенов городов их ID (каждого конкретного)
4) При выборе города аяксом отправлять запрос к обработчику на выдергивание из БД магазинов по ИД выбранного города
5) Отправить результат обратно и сформировать второй селект из полученных магазинов

я бы сделал для блоков типа "костные ткани" враппер, внутри абсолютно позиционированных блоков (можно и одним обойтись) для которых добавить псевдо до\после для горизонтальной\вертикальной линии
Для каждого блока разные параметры длины\отступов и для базовых медиа точек в стилях проставить свои значения
Либо SVG, но это и сложнее и дольше.

Либо вообще одной картинкой с параметром background-size:cover
Будет не очень на совсем мобильных (от 400 пкс и ниже) но тоже как вариант вообще без геморроя

способ 1 www.nikola-breznjak.com/blog/javascript/nodejs/how...
способ 2 https://www.npmjs.com/package/remove-node-modules