/* Видимая рамка фокуса и минимальный размер цели нажатия.

   Кольцо фокуса — это то, чем пользуются с клавиатуры: без него человек не
   видит, где он находится, и жмёт вслепую. По сайту разбросано больше сорока
   правил outline:none — их ставили, чтобы убрать серую системную рамку, но
   взамен ничего не дали. Часть компонентов свой фокус рисует, часть нет:
   переключатель темы, кнопки статусов в расписании, карточки направлений
   на главной, поле ИИ-подсказки остались без индикатора вовсе.

   Здесь задан общий запасной вариант. Он срабатывает только на :focus-visible
   — то есть при работе с клавиатуры, а не при щелчке мышью: щелчок и так
   показывает, куда нажали.

   Почему два кольца. Красная рамка на красной кнопке не видна. Поэтому вплотную
   к элементу идёт светлый (в тёмной теме — тёмный) просвет в 2 px, а за ним
   красная линия. На любой подложке одно из двух колец контрастно.

   !important и высокая специфичность здесь вынужденные: правила outline:none
   в общих файлах заданы обычными селекторами, а часть — с !important. */

html body :is(
  a[href], button, summary,
  input:not([type="hidden"]), select, textarea,
  [role="button"], [role="link"], [role="tab"],
  [tabindex]:not([tabindex="-1"])
):focus-visible {
  outline: 3px solid var(--etl-focus-ring, var(--c-accent)) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 2px var(--etl-focus-gap, #fff) !important;
}

html[data-theme="dark"] body :is(
  a[href], button, summary,
  input:not([type="hidden"]), select, textarea,
  [role="button"], [role="link"], [role="tab"],
  [tabindex]:not([tabindex="-1"])
):focus-visible {
  --etl-focus-ring: #FF6B6D;
  --etl-focus-gap: #0B0F16;
}

/* Минимальная область нажатия 44×44 — это размер подушечки пальца.
   Правило намеренно узкое: только самостоятельные кнопки и ссылки-кнопки.
   Ссылки внутри строки текста не трогаем — растянуть их по высоте значит
   разорвать абзац, и стандарт для них делает исключение. */
html body :is(
  .btn, .btn-primary, .btn-outline, .btn-ghost,
  .p-btn-primary, .p-btn-ghost, .p-btn-full,
  .rq-btn, .sc__pill, .etl-cookie__btn, .theme-switch
) {
  min-height: 44px;
}

html body :is(button, [role="button"]).theme-switch,
html body .p-burger {
  min-width: 44px;
}

/* Повтор общего правила с поднятой специфичностью.

   В нескольких местах (форма заявки, шапка, служебные виджеты) outline снят
   селекторами вида «body#top .rq input… { outline:0 !important }» — с id, то
   есть сильнее правила выше. Ниже то же самое, но специфичность поднята
   селектором body#top и повторением :focus-visible. Дублирование сознательное:
   так правило одно и меняется в одном месте, а не расползается по компонентам. */
html body#top :is(
  a[href], button, summary,
  input:not([type="hidden"]), select, textarea,
  [role="button"], [role="link"], [role="tab"],
  [tabindex]:not([tabindex="-1"])
):focus-visible:focus-visible:focus-visible {
  outline: 3px solid var(--etl-focus-ring, var(--c-accent)) !important;
  outline-offset: 2px !important;
}

/* ── Отдельные случаи, где фокус снят намеренно и ничем не заменён ───────────

   Три компонента гасят кольцо правилами с !important и селектором с id, то
   есть общее правило выше их не перебивает. Здесь специфичность поднята
   повторением :focus-visible — приём некрасивый, но альтернатива это править
   общие файлы, где то же правило может стоять ещё в нескольких местах. */

/* Переключатель темы: outline:none !important стоял без замены. */
html body#top .theme-switch:focus-visible:focus-visible:focus-visible {
  outline: 3px solid var(--etl-focus-ring, var(--c-accent)) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 2px var(--etl-focus-gap, #fff) !important;
}

/* Поле ИИ-подсказки: сам input без рамки и лежит внутри рамки-контейнера,
   поэтому кольцо рисуем на контейнере — иначе оно повиснет внутри поля. */
html body#top .etlai__field:has(:focus-visible) {
  outline: 3px solid var(--etl-focus-ring, var(--c-accent)) !important;
  outline-offset: 2px !important;
  border-radius: inherit;
}
html body#top .etlai .etlai__input:focus-visible:focus-visible:focus-visible {
  outline: 0 !important;
}

/* Переключатель в калькуляторе: сам флажок скрыт, вид рисует соседний
   элемент — кольцо ставим на него. */
html body#top .calc-switch input[type="checkbox"]:focus-visible + .calc-switch-ui {
  outline: 3px solid var(--etl-focus-ring, var(--c-accent)) !important;
  outline-offset: 3px !important;
}

html[data-theme="dark"] body#top :is(.theme-switch, .etlai__field, .calc-switch-ui) {
  --etl-focus-ring: #FF6B6D;
  --etl-focus-gap: #0B0F16;
}