/* ============================================================================
   ВИДИМЫЙ ФОКУС — ОДИН ФАЙЛ НА ВЕСЬ ПРОЕКТ

   Зачем отдельным файлом: до этой правки видимый фокус был ровно у трёх
   элементов (точки навигации, блоки контактов, блоки регалий), у остальных —
   ни своего стиля, ни браузерного: браузерный контур перебивался сбросами
   вроде `border:none; background:none; outline:none` в разных файлах. Человек,
   идущий по сайту с клавиатуры, не видел, где он находится. Отдельный файл
   подключён ПОСЛЕДНИМ и перебивает эти сбросы, а заодно даёт одно место, где
   можно поменять вид кольца сразу везде.

   ПОЧЕМУ КОЛЬЦО ДВОЙНОЕ. Сайт живёт на четырёх разных фонах: жёлтом (почти
   все слайды), почти чёрном (слайд «Риски гостиницы», меню, попапы,
   демо-панель), бирюзовом («Что получает гость») и на фотоиллюстрациях.
   Однотонное кольцо любого цвета на каком-то из них пропадает. Поэтому кольцо
   из двух слоёв: светлый внутри, тёмный снаружи — их граница видна на любом
   фоне, включая фотографию.

   :focus-visible, а НЕ :focus — кольцо появляется при обходе с клавиатуры и не
   появляется при обычном клике мышью. Это поведение самого браузера, мы его
   только оформляем.
   ========================================================================= */

/* Базовое кольцо. box-shadow, а не второй outline: outline у элемента может
   быть только один, а нам нужны два слоя. */
/* ⚠️ НИКАКОГО border-radius в этих правилах. Первая версия ставила здесь
   `border-radius:inherit` — из соображения «пусть кольцо повторит форму
   кнопки». Это была ошибка, и дорогая: `inherit` берёт значение У РОДИТЕЛЯ, а
   у родителей радиуса нет — то есть правило не «подгоняло кольцо», а обнуляло
   СОБСТВЕННОЕ скругление кнопки на время фокуса. Круглый крестик в попапе и
   кнопка «Демонстрация» в шапке на мгновение фокуса становились квадратными
   (замечание пользователя со скриншотами 2026-08-08: заметно сразу после Esc,
   когда фокус возвращается на кнопку, которой открывали диалог).
   Подгонять ничего и не нужно: outline с 2021 года сам повторяет
   border-radius элемента во всех движках. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible{
  outline:2px solid #fff;
  outline-offset:2px;
  box-shadow:0 0 0 4px #1A1A1C;
}
/* Инверсия для тёмных поверхностей: там белое кольцо снаружи, тёмное внутри —
   иначе тёмный внешний слой сливается с фоном и остаётся только тонкая белая
   линия. Список поверхностей, а не «всё тёмное подряд»: селектор должен быть
   предсказуемым при следующей правке. */
:where(#demo-panel, #m-demo, #m-menu, #m-lastpopup, #lastpopup-fixed-wrap,
       .menubar.is-dark, #slide-3, .sol-popup)
  :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible{
  outline-color:#1A1A1C;
  box-shadow:0 0 0 4px #fff;
}

/* ----- Чекбокс согласия ----------------------------------------------------
   Настоящий <input type="checkbox"> здесь спрятан (opacity:0, 24×24 у
   десктопа и 0×0 у мобилки), а рисуется квадратик-подделка .demo-checkbox__box
   / .m-checkbox__box. Кольцо на самом input поэтому не видно вообще: на
   десктопе оно обводит прозрачный квадрат, на мобилке — точку нулевого
   размера. Переносим кольцо на видимую подделку.

   Это ОБЯЗАТЕЛЬНОЕ поле формы: не увидев, что фокус на нём, человек с
   клавиатуры не поймёт, почему форма не отправляется. */
.demo-checkbox input:focus-visible ~ .demo-checkbox__box,
.m-checkbox input:focus-visible + .m-checkbox__box{
  outline:2px solid #1A1A1C;
  outline-offset:2px;
  box-shadow:0 0 0 4px #fff;
}

/* ----- Поля формы ----------------------------------------------------------
   У полей своя подсветка — жёлтая нижняя граница (см. .demo-field:focus-within
   и .m-field input:focus). Она работает и при клике мышью, но по толщине
   читается слабо, а общее кольцо вокруг поля во всю ширину карточки выглядит
   грубо. Поэтому полям — не кольцо, а та же жёлтая линия, но толще. */
:where(#demo-panel, #m-demo) :where(input, textarea):focus-visible{
  outline:none;
  box-shadow:none;
  border-bottom-width:2px;
  border-bottom-color:var(--yellow);
}

/* ----- Пункты главного меню (десктоп) --------------------------------------
   Текст пункта теперь лежит внутри настоящей <button> (см. разметку и
   комментарий в css/menubar.css). Кольцо рисуем не на кнопке, а на самом
   <li>: у него уже есть готовая форма пилюли — те же 40px высоты, тот же
   радиус 100px и тот же ::before, которым рисуются рамки hover и активного
   пункта. Кольцо вокруг голого текста внутри выглядело бы прямоугольником
   поперёк пилюли. */
.menu li:has(button:focus-visible){
  outline:2px solid #fff;
  outline-offset:2px;
  box-shadow:0 0 0 4px #1A1A1C;
}
.menubar.is-dark .menu li:has(button:focus-visible){
  outline-color:#1A1A1C;
  box-shadow:0 0 0 4px #fff;
}
/* Фоллбек для движков без :has (Firefox до 121, Safari до 15.4): кольцо
   рисуется прямо на кнопке. Хуже по виду, но фокус ВИДЕН — а это и есть
   задача. Правило стоит выше по каскаду, чем :has-версия, поэтому там, где
   :has работает, оно перебивается. */
.menu li > button:focus-visible{
  outline:2px solid #fff;
  outline-offset:4px;
  box-shadow:0 0 0 4px #1A1A1C;
  /* Единственное место, где border-radius в этом файле уместен, и вот почему:
     у самой кнопки пункта меню нет ни фона, ни рамки — её собственный радиус
     на экране не виден НИКАК и служит только формой для outline. Собственного
     скругления, которое можно было бы затереть, здесь нет. */
  border-radius:100px;
}
.menu li:has(button:focus-visible) > button:focus-visible{
  outline:none;
  box-shadow:none;
}