Ну потому-что данный элемент ты создаешь только при hover, а транзишн изменяет состояние уже существующего. И еще некоторые свойства, не наследуются псевдоэлементами, нужно явно указывать.
В change сохраняешь состояние input в localStorage. Дополняешь свой код обработчиком $(documen).ready (для jquery) или DOMContentLoaded (ванила) в котором проверяешь в localStorage состояние input. Если значение, есть и оно положительное показываешь окно регистрации.
auto доступная ширина, 1fr ограниченная. Если в раскладке есть три колонки и две из них жёстко заданы при помощи px, а третья при помощи 1fr, то разницы между auto не будет.
А нет четкого определения сейчас в верстке используются как отзывчивые так и адаптивные методы. Адаптивный - это под определенные устройства верстка, отзывчивая же охватывает большее количество разрешений и построение блоков меняется по мере необходимости. Но один фиг все называется адаптивная потому-что так привыкли.
Вопрос: как у тебя на div может срабатывать focus/blur? И если элемент по которому кликают находится внутри элемента при этом на него нельзя сфокусироваться (а div такой), фокус с родителя не спадет. Делай какое-нибудь условие в hide, что-бы такого закрытия не происходило.
