/* Отладка раскладки.
   Контур у каждого элемента: сразу видно, кто занимает место, откуда
   лишний отступ и где рамка стоит там, где её не ждали.

   Outline, а не border: он рисуется поверх и не входит в размеры,
   поэтому включение режима не сдвигает ни одного элемента страницы.

   Панель настроек из-под режима исключена: она сама не страница, и
   контуры её полей мешали бы смотреть на то, ради чего режим включён. */
body *:not(.inspector, .inspector *) {
    outline: calc(var(--debug-on) * 1px) solid var(--debug-color);
}

/* Вложенность видно по насыщенности: у внутренних элементов контур
   бледнее, иначе на глубоком дереве все линии сливаются в сетку. */
body * *:not(.inspector, .inspector *) {
    outline-color: color-mix(in srgb, var(--debug-color) 60%, transparent);
}

body * * *:not(.inspector, .inspector *) {
    outline-color: color-mix(in srgb, var(--debug-color) 35%, transparent);
}