/* ══════════════════════════════════════
   RESET & ПЕРЕМЕННЫЕ
══════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }


/* Страница прокручивается обычным образом: если содержимое не влезает
   в экран (например, главная на маленьком телефоне) — листается целиком */
html { height: 100%; }

html, body {
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  transition: background .3s, color .3s;
}






/* ══════════════════════════════════════
   СТРАНИЦА 1 — ФИЛЬТРЫ
══════════════════════════════════════ */




/* ── Фокус с клавиатуры (Tab) ─────────────────────────────────────
   Синяя рамка на любой кнопке/поле — видно, где сейчас фокус.
   :focus-visible не срабатывает на клик мышью и касание. */
:focus-visible {
  outline: 2px solid var(--accent-ink);
  outline-offset: 2px;
}

/* У поля ввода фокус и так виден по синей рамке */
#msg-input:focus-visible { outline: none; }

/* Свитч: сам чекбокс скрыт — рамку рисуем на дорожке */
.switch input:focus-visible + .switch-track {
  outline: 2px solid var(--accent-ink);
  outline-offset: 2px;
}