/* Узкий экран: отказ, а не адаптив.
 *
 * Макет нарисован от 1280 и не сжимается. Ниже 1100 — честная заглушка
 * «журнал живёт на компьютере, в дороге приложение»: поплывшая вёрстка хуже
 * прямого отказа. Брейкпоинт один.
 *
 * **Почему отдельным файлом и подключается последним.** Гейт отменяет
 * `display` у двух корней из двух разных файлов: `.app` — сетка каркаса
 * из `shell.css`, `.login` — центрирование из `screens.css`. Медиазапрос
 * специфичности не добавляет, поэтому правило, лежащее раньше отменяемого,
 * молча проигрывает: заглушка показывается, а экран под ней остаётся видимым.
 * Держать один блок в конце каскада надёжнее, чем дублировать его по файлам
 * и следить за порядком подключения. */

.too-narrow {
  display: none;
}

@media (max-width: 1099px) {
  .app,
  .login {
    display: none;
  }
  .too-narrow {
    display: flex;
    flex-direction: column;
    gap: var(--s5);
    align-items: flex-start;
    justify-content: center;
    height: 100dvh;
    padding: var(--s10);
  }
}