/* ═══════════════════════════════════════════════════════════════════════
   СИСТЕМА. Единственный источник размеров, цветов и отступов.

   Правило одно: за рамки этого файла выходить нельзя. Ни в разметке, ни в
   app.css не должно появляться числа, которого здесь нет, и цвета, который
   здесь не назван. Проверяет scripts/css-scale.py.

   Порядок слоёв объявлен ПЕРВОЙ строкой файла и решает все споры о том,
   что кого перебьёт. Раньше это решал порядок строк: класс .ac__main был
   объявлен в одиннадцати местах, и чтобы понять итоговый отступ, надо было
   прочитать пять тысяч строк. Теперь утилита в разметке всегда сильнее
   компонента, а компонент — сильнее базы, где бы что ни лежало.
   ═══════════════════════════════════════════════════════════════════════ */

@layer tokens, base, components, utilities;

/* ─── ЦВЕТ ──────────────────────────────────────────────────────────────
   Ролей мало намеренно. Цвет в разметке не пишется никогда — только роль,
   поэтому тёмная и светлая темы не могут разойтись по смыслу.

   ⚠️ Цветов текста ДВА. Было три, и третий никто не мог отличить от
   второго: разницу между 72% и 55% глаз ловит, между 55% и 62% — уже нет.
   Лишняя ступень не давала иерархии, зато давала разнобой.

   ⚠️ Цветных пятен на сайте ровно три, и все несут данные: жив, просит
   ключ, не отвечает. Никаких «акцентов» и «брендовых» красок. */
/* Вне слоя намеренно: правила вне @layer сильнее любого слоя, и только
   так эти значения перебивают старый :root в app.css. */
:root {
  --bg:        #0a0a0a;   /* фон страницы */
  --bg-soft:   #141414;   /* подложка: наведение, блок кода, вторая колонка */
  --text:      #f4f2ee;   /* заголовки, имена, числа — всё, что читают */
  --text-soft: rgba(244, 242, 238, .64);  /* описания, подписи, единицы */
  --line:      #2b2a2a;   /* единственный разделитель, один вес */

  --up:        #4ade80;   /* отвечает */
  --auth:      #fbbf24;   /* жив, но просит ключ */
  --down:      #f87171;   /* не отвечает */

    /* ─── ОТСТУПЫ ────────────────────────────────────────────────────
       Одиннадцать ступеней, посчитанных ПО ФАКТУ, а не выдуманных:
       полсайта живёт на 6, 10 и 14 — только их 143 штуки. Красивый
       «шаг четыре» потребовал бы сдвинуть вёрстку всюду разом.
       Числа в именах — пиксели, помнить нечего. */
  --s4: 4px;   --s6: 6px;   --s8: 8px;   --s10: 10px;
  --s12: 12px; --s14: 14px; --s16: 16px; --s20: 20px;
  --s24: 24px; --s32: 32px; --s40: 40px;

    /* ─── РАЗМЕР ТЕКСТА ──────────────────────────────────────────────
       Шесть ступеней вместо двадцати двух. Каждая привязана к типу
       элемента, а не выбирается на глаз — см. раздел «где что». */
  /* 32 — размер заголовка в кабинете. На публичной части он доходит до 54,
     но там страница во всю ширину экрана; здесь слева стоит меню, колонка
     уже, и 54 давят на содержимое. */
  --t-h1: 32px;
  --t-h2: 20px;
  --t-h3: 15px;
  --t-body: 14px;   /* обычный текст, поля, кнопки */
  --t-dense: 13px;  /* строки списков, метаданные */
  --t-small: 12px;  /* подписи, единицы, служебное */
  --t-tiny: 11px;   /* метки капителью, счётчики */

    /* Боковое поле содержимого. В кабинете больше: слева стоит меню со
       своей линией, и текст с общим отступом упирается прямо в неё. */
  --pad: 20px;
  --pad-ac: clamp(24px, 2.4vw, 40px);

    /* Размер кнопки в строке списка. Отдельными переменными, потому что на
       телефоне поле под палец больше, и раньше это увеличение писалось в
       мобильном блоке отдельным правилом — а крестик своё значение брал
       из другого файла и оставался ниже соседней кнопки. Меняется здесь,
       применяется ко всем сразу. */
  --btn-py: 6px;
  --btn-px: 10px;
  --btn-fs: var(--t-small);
  --btn-lh: 1.2;

    /* Высота строчной кнопки, посчитанная из тех же переменных: поля
       сверху и снизу, строка текста и рамка. Нужна квадратному крестику —
       ширину ему больше неоткуда взять. */
  --btn-h: calc(var(--btn-py) * 2 + var(--btn-lh) * 1em + 2px);

    /* ─── ПЕРЕХОДНЫЕ ИМЕНА ───────────────────────────────────────────
       Старые переменные оставлены ссылками на новые, чтобы существующая
       вёрстка кабинета работала, пока переводим её по частям. Двух
       источников правды нет: значение живёт наверху, здесь только имя.

       ⚠️ Три цвета текста схлопнуты в два: и --paper-dim, и --paper-mute
       теперь указывают на один --text-soft. Это и есть та правка, ради
       которой всё затевалось, — разнобой пропадает сам, без правки
       каждого места. */
  --ink: var(--bg);
  --ink-2: var(--bg-soft);
  --paper: var(--text);
  --paper-dim: var(--text-soft);
  --paper-mute: var(--text-soft);
  --line-soft: var(--bg-soft);
  --hover: var(--bg-soft);
  --alive: var(--up);
  --tx-xs: var(--t-tiny);  --tx-sm: var(--t-small);
  --tx-md: var(--t-dense); --tx: var(--t-body);
  --t1: var(--t-h1); --t2: var(--t-h2); --t3: var(--t-h3);
  --t2c: var(--t-dense); --t4: var(--t-tiny);

  }

:root[data-theme="light"] {
  --bg:        #f4f2ee;
  --bg-soft:   #e8e5df;
  --text:      #0a0a0a;
  --text-soft: rgba(10, 10, 10, .68);
  --line:      #c7c3bb;

    /* На светлом фоне те же тона нечитаемы — нужны темнее. */
  --up:        #16a34a;
  --auth:      #b45309;
  --down:      #dc2626;
}

/* ─── ГДЕ ЧТО СТАВИТСЯ ──────────────────────────────────────────────────
   Размер и цвет привязаны к ТИПУ элемента, а не выбираются каждый раз.
   Стили висят на самих тегах: написал h2 — получил заголовок раздела,
   без классов и без раздумий.

   ⚠️ Отступ у заголовка только СНИЗУ. Отступ сверху даёт блок, в котором
   заголовок лежит; два источника отступа складываются, и именно так
   разъезжались расстояния между разделами. */
@layer base {
  h1 {
    font-size: var(--t-h1); font-weight: 700; letter-spacing: -.02em;
    line-height: 1.05; color: var(--text);
    margin: 0 0 var(--s8);
  }
  h2 {
    font-size: var(--t-h2); font-weight: 700; letter-spacing: -.01em;
    line-height: 1.2; color: var(--text);
    margin: 0 0 var(--s8);
  }
  h3 {
    font-size: var(--t-h3); font-weight: 600;
    line-height: 1.3; color: var(--text);
    margin: 0 0 var(--s6);
  }
  /* h4 — служебная метка над блоком: капитель, приглушённая, мелкая.
     Такие подписи есть у графиков и колонок фактов. */
  h4 {
    font-size: var(--t-tiny); font-weight: 600;
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--text-soft);
    margin: 0 0 var(--s8);
  }

  p { margin: 0 0 var(--s12); line-height: 1.6; }
  p:last-child { margin-bottom: 0; }

  /* Подзаголовок страницы — абзац сразу под h1. Отдельного класса не
     нужно: это единственное место, где абзац идёт следом за заголовком
     страницы, и выглядеть он должен всегда одинаково. */
  h1 + p { font-size: var(--t-body); color: var(--text-soft); }
  h2 + p, h3 + p { font-size: var(--t-dense); color: var(--text-soft); }

  /* Числовое поле — без системных стрелок.
     Их рисует операционная система, причесать нельзя: белые кнопки посреди
     тёмной страницы, как было с выпадающим списком.

     Свои не делаем намеренно. Это обёртка плюс скрипт на нажатия ради поля,
     которое встречается один раз и где шаг ввода — тридцать дней: щёлкать
     по одному бессмысленно, число набирают руками. Поле остаётся числовым,
     поэтому на телефоне открывается цифровая клавиатура. */
  input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
  input[type="number"]::-webkit-outer-spin-button,
  input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

  small { font-size: var(--t-small); color: var(--text-soft); }
}

/* ─── УТИЛИТЫ (генерируются scripts/gen-utils.py) ───

   Правится генератором, не руками: класс с числом вне шкалы не должен
   существовать, иначе шкала перестаёт быть шкалой.

   Слой utilities объявлен ПОСЛЕДНИМ, поэтому утилита в разметке всегда
   сильнее компонента — независимо от порядка строк в файлах. */
@layer utilities {
  .p-4 { padding: 4px; }
  .p-6 { padding: 6px; }
  .p-8 { padding: 8px; }
  .p-10 { padding: 10px; }
  .p-12 { padding: 12px; }
  .p-14 { padding: 14px; }
  .p-16 { padding: 16px; }
  .p-20 { padding: 20px; }
  .p-24 { padding: 24px; }
  .p-32 { padding: 32px; }
  .p-40 { padding: 40px; }
  .p-0 { padding: 0; }
  .pt-4 { padding-top: 4px; }
  .pt-6 { padding-top: 6px; }
  .pt-8 { padding-top: 8px; }
  .pt-10 { padding-top: 10px; }
  .pt-12 { padding-top: 12px; }
  .pt-14 { padding-top: 14px; }
  .pt-16 { padding-top: 16px; }
  .pt-20 { padding-top: 20px; }
  .pt-24 { padding-top: 24px; }
  .pt-32 { padding-top: 32px; }
  .pt-40 { padding-top: 40px; }
  .pt-0 { padding-top: 0; }
  .pb-4 { padding-bottom: 4px; }
  .pb-6 { padding-bottom: 6px; }
  .pb-8 { padding-bottom: 8px; }
  .pb-10 { padding-bottom: 10px; }
  .pb-12 { padding-bottom: 12px; }
  .pb-14 { padding-bottom: 14px; }
  .pb-16 { padding-bottom: 16px; }
  .pb-20 { padding-bottom: 20px; }
  .pb-24 { padding-bottom: 24px; }
  .pb-32 { padding-bottom: 32px; }
  .pb-40 { padding-bottom: 40px; }
  .pb-0 { padding-bottom: 0; }
  .pl-4 { padding-left: 4px; }
  .pl-6 { padding-left: 6px; }
  .pl-8 { padding-left: 8px; }
  .pl-10 { padding-left: 10px; }
  .pl-12 { padding-left: 12px; }
  .pl-14 { padding-left: 14px; }
  .pl-16 { padding-left: 16px; }
  .pl-20 { padding-left: 20px; }
  .pl-24 { padding-left: 24px; }
  .pl-32 { padding-left: 32px; }
  .pl-40 { padding-left: 40px; }
  .pl-0 { padding-left: 0; }
  .pr-4 { padding-right: 4px; }
  .pr-6 { padding-right: 6px; }
  .pr-8 { padding-right: 8px; }
  .pr-10 { padding-right: 10px; }
  .pr-12 { padding-right: 12px; }
  .pr-14 { padding-right: 14px; }
  .pr-16 { padding-right: 16px; }
  .pr-20 { padding-right: 20px; }
  .pr-24 { padding-right: 24px; }
  .pr-32 { padding-right: 32px; }
  .pr-40 { padding-right: 40px; }
  .pr-0 { padding-right: 0; }
  .px-4 { padding-left: 4px; padding-right: 4px; }
  .px-6 { padding-left: 6px; padding-right: 6px; }
  .px-8 { padding-left: 8px; padding-right: 8px; }
  .px-10 { padding-left: 10px; padding-right: 10px; }
  .px-12 { padding-left: 12px; padding-right: 12px; }
  .px-14 { padding-left: 14px; padding-right: 14px; }
  .px-16 { padding-left: 16px; padding-right: 16px; }
  .px-20 { padding-left: 20px; padding-right: 20px; }
  .px-24 { padding-left: 24px; padding-right: 24px; }
  .px-32 { padding-left: 32px; padding-right: 32px; }
  .px-40 { padding-left: 40px; padding-right: 40px; }
  .px-0 { padding-left: 0; padding-right: 0; }
  .py-4 { padding-top: 4px; padding-bottom: 4px; }
  .py-6 { padding-top: 6px; padding-bottom: 6px; }
  .py-8 { padding-top: 8px; padding-bottom: 8px; }
  .py-10 { padding-top: 10px; padding-bottom: 10px; }
  .py-12 { padding-top: 12px; padding-bottom: 12px; }
  .py-14 { padding-top: 14px; padding-bottom: 14px; }
  .py-16 { padding-top: 16px; padding-bottom: 16px; }
  .py-20 { padding-top: 20px; padding-bottom: 20px; }
  .py-24 { padding-top: 24px; padding-bottom: 24px; }
  .py-32 { padding-top: 32px; padding-bottom: 32px; }
  .py-40 { padding-top: 40px; padding-bottom: 40px; }
  .py-0 { padding-top: 0; padding-bottom: 0; }
  .m-4 { margin: 4px; }
  .m-6 { margin: 6px; }
  .m-8 { margin: 8px; }
  .m-10 { margin: 10px; }
  .m-12 { margin: 12px; }
  .m-14 { margin: 14px; }
  .m-16 { margin: 16px; }
  .m-20 { margin: 20px; }
  .m-24 { margin: 24px; }
  .m-32 { margin: 32px; }
  .m-40 { margin: 40px; }
  .m-0 { margin: 0; }
  .mt-4 { margin-top: 4px; }
  .mt-6 { margin-top: 6px; }
  .mt-8 { margin-top: 8px; }
  .mt-10 { margin-top: 10px; }
  .mt-12 { margin-top: 12px; }
  .mt-14 { margin-top: 14px; }
  .mt-16 { margin-top: 16px; }
  .mt-20 { margin-top: 20px; }
  .mt-24 { margin-top: 24px; }
  .mt-32 { margin-top: 32px; }
  .mt-40 { margin-top: 40px; }
  .mt-0 { margin-top: 0; }
  .mb-4 { margin-bottom: 4px; }
  .mb-6 { margin-bottom: 6px; }
  .mb-8 { margin-bottom: 8px; }
  .mb-10 { margin-bottom: 10px; }
  .mb-12 { margin-bottom: 12px; }
  .mb-14 { margin-bottom: 14px; }
  .mb-16 { margin-bottom: 16px; }
  .mb-20 { margin-bottom: 20px; }
  .mb-24 { margin-bottom: 24px; }
  .mb-32 { margin-bottom: 32px; }
  .mb-40 { margin-bottom: 40px; }
  .mb-0 { margin-bottom: 0; }
  .ml-4 { margin-left: 4px; }
  .ml-6 { margin-left: 6px; }
  .ml-8 { margin-left: 8px; }
  .ml-10 { margin-left: 10px; }
  .ml-12 { margin-left: 12px; }
  .ml-14 { margin-left: 14px; }
  .ml-16 { margin-left: 16px; }
  .ml-20 { margin-left: 20px; }
  .ml-24 { margin-left: 24px; }
  .ml-32 { margin-left: 32px; }
  .ml-40 { margin-left: 40px; }
  .ml-0 { margin-left: 0; }
  .mr-4 { margin-right: 4px; }
  .mr-6 { margin-right: 6px; }
  .mr-8 { margin-right: 8px; }
  .mr-10 { margin-right: 10px; }
  .mr-12 { margin-right: 12px; }
  .mr-14 { margin-right: 14px; }
  .mr-16 { margin-right: 16px; }
  .mr-20 { margin-right: 20px; }
  .mr-24 { margin-right: 24px; }
  .mr-32 { margin-right: 32px; }
  .mr-40 { margin-right: 40px; }
  .mr-0 { margin-right: 0; }
  .mx-4 { margin-left: 4px; margin-right: 4px; }
  .mx-6 { margin-left: 6px; margin-right: 6px; }
  .mx-8 { margin-left: 8px; margin-right: 8px; }
  .mx-10 { margin-left: 10px; margin-right: 10px; }
  .mx-12 { margin-left: 12px; margin-right: 12px; }
  .mx-14 { margin-left: 14px; margin-right: 14px; }
  .mx-16 { margin-left: 16px; margin-right: 16px; }
  .mx-20 { margin-left: 20px; margin-right: 20px; }
  .mx-24 { margin-left: 24px; margin-right: 24px; }
  .mx-32 { margin-left: 32px; margin-right: 32px; }
  .mx-40 { margin-left: 40px; margin-right: 40px; }
  .mx-0 { margin-left: 0; margin-right: 0; }
  .my-4 { margin-top: 4px; margin-bottom: 4px; }
  .my-6 { margin-top: 6px; margin-bottom: 6px; }
  .my-8 { margin-top: 8px; margin-bottom: 8px; }
  .my-10 { margin-top: 10px; margin-bottom: 10px; }
  .my-12 { margin-top: 12px; margin-bottom: 12px; }
  .my-14 { margin-top: 14px; margin-bottom: 14px; }
  .my-16 { margin-top: 16px; margin-bottom: 16px; }
  .my-20 { margin-top: 20px; margin-bottom: 20px; }
  .my-24 { margin-top: 24px; margin-bottom: 24px; }
  .my-32 { margin-top: 32px; margin-bottom: 32px; }
  .my-40 { margin-top: 40px; margin-bottom: 40px; }
  .my-0 { margin-top: 0; margin-bottom: 0; }
  .ml-auto { margin-left: auto; }
  .mr-auto { margin-right: auto; }
  .gap-4 { gap: 4px; }
  .gap-6 { gap: 6px; }
  .gap-8 { gap: 8px; }
  .gap-10 { gap: 10px; }
  .gap-12 { gap: 12px; }
  .gap-14 { gap: 14px; }
  .gap-16 { gap: 16px; }
  .gap-20 { gap: 20px; }
  .gap-24 { gap: 24px; }
  .gap-32 { gap: 32px; }
  .gap-40 { gap: 40px; }
  .gap-0 { gap: 0; }

  .flex { display: flex; }
  .grid { display: grid; }
  .block { display: block; }
  .none { display: none; }
  .col { flex-direction: column; }
  .wrap { flex-wrap: wrap; }
  .center { align-items: center; }
  .baseline { align-items: baseline; }
  .start { align-items: flex-start; }
  .between { justify-content: space-between; }
  .grow { flex: 1; min-width: 0; }
  .nogrow { flex: none; }
  .min0 { min-width: 0; }

  .t-body { font-size: var(--t-body); }
  .t-dense { font-size: var(--t-dense); }
  .t-small { font-size: var(--t-small); }
  .t-tiny { font-size: var(--t-tiny); }
  .soft { color: var(--text-soft); }
  .strong { color: var(--text); }
  .bold { font-weight: 600; }
  .caps { letter-spacing: .08em; text-transform: uppercase; }
  .nowrap { white-space: nowrap; }
  .ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .bt { border-top: 1px solid var(--line); }
  .bb { border-bottom: 1px solid var(--line); }
  .bl { border-left: 1px solid var(--line); }
  .br { border-right: 1px solid var(--line); }
  .bt-0 { border-top: 0; }
  .bb-0 { border-bottom: 0; }
  .bg-soft { background: var(--bg-soft); }
}

/* ─── КНОПКА ────────────────────────────────────────────────────────────
 Один вид на все кнопки сайта, объявленный ЗДЕСЬ и больше нигде.

 ⚠️ Вне @layer намеренно: app.css живёт вне слоёв, а правила вне слоя
   сильнее любого слоя — из «components» этот вид просто не применялся.

   ⚠️ До этого правила у каждой кнопки было своё наведение: у числа в
 строке светлела рамка, у крестика — фон, у выгрузки — только фон, у
 тихой кнопки — рамка и прозрачность. Шесть разных откликов на одно и
 то же действие, и каждый заводился отдельно, когда правили свой блок.

 Классы перечислены списком, а не через общий класс в разметке: так вид
 меняется в одном месте и не требует править одиннадцать шаблонов. Новая
 кнопка добавляется сюда же — одной строкой к списку. */
.wrow__num,
.wrow__x,
.ac__sum-link,
.wgt__copy,
.ac__btn--ghost,
.arow__in {
  border: 1px solid var(--line);
  color: var(--text-soft);
  background: none;
  cursor: pointer;
  transition: border-color .12s, color .12s, background-color .12s;
}

/* Единственный отклик: рамка и текст становятся основным цветом,
   фон чуть светлеет. Ни прозрачности, ни смены толщины — они дёргают
   раскладку и читаются как другое состояние, а не как наведение. */
.wrow__num:hover,
.wrow__x:hover,
.ac__sum-link:hover,
.wgt__copy:hover,
.ac__btn--ghost:hover,
.arow__in:hover {
  border-color: var(--text);
  color: var(--text);
  background: var(--bg-soft);
}

/* Фокус с клавиатуры отличается от наведения намеренно: по кнопкам
   ходят табом, и человек должен видеть, где он находится, даже если
   мышь лежит на другой кнопке. */
.wrow__num:focus-visible,
.wrow__x:focus-visible,
.ac__sum-link:focus-visible,
.wgt__copy:focus-visible,
.ac__btn--ghost:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}

/* Размер строчных кнопок и полей — здесь, а не у каждой по отдельности.
   Одинаковый межстрочный интервал так же важен, как отступы: он входит в
   высоту, и крестик с интервалом 1 против 1.2 у соседа выходил ниже даже
   при совпадающих отступах. */
.wrow__num,
.wrow__x,
.arow__in,
.pol__num,
.wrow__reason,
.ac__select--sm {
  padding: var(--btn-py) var(--btn-px);
  font-size: var(--btn-fs);
  line-height: var(--btn-lh);
}

/* Форма отказа от проверок: три поля и кнопка в строку.
   Адрес шире прочих — в него вставляют ссылку целиком, а имя просителя и
   заметка короткие. Отдельный класс, а не .mine__add: там два элемента и
   равные доли, здесь четыре и разные. На узком экране — столбиком, как везде. */
.optout__add { display: flex; gap: var(--s12); flex-wrap: wrap; }
.optout__add .ac__input { flex: 1 1 12rem; min-width: 0; }
.optout__add .ac__input:first-child { flex: 2 1 20rem; }

@media (max-width: 720px) {
  .optout__add { flex-direction: column; }
}

/* Второй тип строчной кнопки — залитая. Ставится ВТОРЫМ классом к любой
   кнопке выше: размер и отступы уже посчитаны там, здесь только краска.

   Зачем понадобился: тихая кнопка говорит «можно», и этого мало там, где
   нажатие и есть смысл страницы. Первые два автора, зарегистрировавшиеся
   у нас, ушли, не заявив свои серверы: список стоял перед глазами, а
   рамка справа читалась как метка, а не как действие.

   Краска — та же пара, что у крупной .ac__btn (--paper на --ink), чтобы
   в кабинете не завелось двух разных «главных» кнопок. */
.btn-solid {
  background: var(--paper);
  border-color: var(--paper);
  color: var(--ink);
  font-weight: 500;
}

/* Отклик — только прозрачность. Рамка и текст у залитой уже основного
   цвета, и общий приём «рамка темнеет» на ней просто не виден. */
.btn-solid:hover {
  background: var(--paper);
  border-color: var(--paper);
  color: var(--ink);
  opacity: .9;
}

/* На телефоне цель под палец крупнее. Одна правка вместо трёх: раньше
   увеличение писалось в мобильном блоке app.css, а крестик туда не
   попадал и оставался маленьким. */
@media (max-width: 720px) {
  :root { --btn-py: 8px; --btn-px: 14px; --btn-fs: var(--t-dense); }
}

/* Крестик — квадратный. У остальных кнопок отступы по бокам шире, чем
   сверху и снизу: подпись длинная и ей нужно поле. У крестика подпись —
   один знак, и те же отступы растягивали его в прямоугольник.

   Ширина берётся из --btn-h — той же высоты, что у соседней кнопки.
   aspect-ratio здесь не работает: он задаёт второе измерение только
   когда первое известно, а у кнопки по содержимому считаются оба, и
   крестик выходил узкой полоской в 18px при высоте 33. */
.wrow__x {
  display: inline-flex; align-items: center; justify-content: center;
  padding-inline: 0; width: var(--btn-h);
}

/* ─── ФЛАЖОК В СТРОКЕ С ПОДПИСЬЮ ───────────────────────────────────────
   Флажок стоит по центру ПЕРВОЙ строки подписи. Не по верху строки: сам
   он 16px, а строка текста выше, и без смещения он липнет к верхней
   кромке — на телефоне, где подпись переносится на две строки, это
   особенно заметно.

   И не по центру всей подписи: у правила про доступ к хосту на узком
   экране три строки, центр блока уводит флажок к середине фразы, и он
   перестаёт читаться как её начало.

   1lh — высота строки этого самого элемента, поэтому формула верна при
   любом кегле и в любом списке, а не только здесь. Запасное значение
   строкой выше для браузеров, которые эту единицу ещё не знают: 2px —
   ровно то, что даёт формула при нашей строке 13px × 1.55.

   ⚠️ Смещение живёт здесь, а не рядом с .pol__row в app.css: там оно
   уже стояло и не работало — общее правило флажка объявлено ниже по
   файлу и обнуляло поля. */
label > input[type="checkbox"]:not(.burger__box) {
  /* Шрифт наследуется не ради текста — его у флажка нет, — а ради 1lh
     ниже: без этого единица берёт высоту строки САМОГО флажка (15px), и
     формула давала −0.5px вместо +2px, то есть двигала его вверх вместо
     вниз. Размер задан явными 16px и от шрифта не зависит. */
  font: inherit;
  margin-top: 2px;
  margin-top: calc((1lh - 16px) / 2);
}